Question

My form has some fields that are mandatory and I have marked them with class="required". I am writing the below jquery to validate this form, but it doesn’t happen. I think either I am messing with calling the two functions or I am not getting the proper element through $(this).

<script type="text/javascript">
    function validatemyForm() {
        $('.required').each(function() {
            if($(this).val() == "" || $(this).replace(/\s/g, '').length == 0)
            {
                $(this).insertAfter('<span>This is a Required Filed</span>');
                return false;
            }
            else {
                $(this).remove();
            }
        })
        return true;
    }
</script>

I am calling the form, from the onsubmit event handler <form id="myform" onsubmit ="return validatemyForm();">. Am I incorrectly using each and this of jQuery?

Answer 1

A number of things:

1. You can use replace on a String, whilst you use it on a jQuery object. There is no $(this).replace. If you want to check for whitespace, you need the value, i.e. $(this).val().replace.

2. You use $(this).insertAfter which means that the input element is inserted after the span. $(this).remove simply removes the input element which isn’t what you’re after either I think.

3. You return false in the each(), but this doesn’t return that value in the validatemyForm function. In that function, you always return true.

I changed it to this to get it working: http://jsfiddle.net/DaDQT/6/.