字段为空并显示错误消息时阻止提交

Question

I have lots of different forms on my website. I want to use Jquery to:

• Display an error message if any of the text fields are blank
• Highlight the blank fields with CSS
• Prevent submission of the form until the user fills them in.

All the different forms link to the same Jquery script, so I have to make sure that my jquery doesn't make any references to a specific form (otherwise, I will have to write a different script for each form).

I thought the best way to do this would be to an each function to loop through the input fields to check if they are blank and then use event.preventDefault(); to stop the form from submitting and addClass to highlight the fields.

The each function works but the preventdefault/addclass don't seem to work. I'm not sure what I am doing wrong. Here is my code: ( JSFiddle version)

$(document).ready(function () {

$('.names').submit(function(){  
          $('.names input[type=text]').each(function(n,element){  
            if ($(element).val()=='') {  
                event.preventDefault();
              alert('Some fields are blank (highlighted in red). Please fill them in');  
              ($element).addClass("error");
              return false;  
            }  
          });  
          return true;  
        });

});

How can I get it to work? Also would it be possible to apply the error class to the parent <p> tag of the input field rather than the field itself?

Answer 1

event is undefined. Catch the parameter in your submit-callback and invoke preventDefault on that:

$(document).ready(function () {
    $('.names').submit(function (e) {
        $(this).find('input[type=text]').each(function (n, element) {
            if ($(element).val() == '') {
                e.preventDefault();
                alert('Some fields are blank (highlighted in red). Please fill them in');
                $(element).parent().addClass("error");

                return false;
            }
        });

        return true;
    });
});

Note that:

1. ($element) is also undefined, you meant $(element) .
2. To add the error class to the parent, use $(element).parent() .
3. This wont work if you have multiple forms. Use $(this).find('input[...]') instead of $('.names input[...]') . This way, you only validate the form that you are submitting.
4. Here is a working fiddle .