jQuery check inputs not empty before submit

问题:

I've been looking at different threads about how to do this and got the following script together, however, even when I type into the inputs so they're not empty, I'm getting the alert pop up and the form doesn't submit.

Can anyone see what I'm doing wrong or if there's a simpler / more efficient way of doing this?

Thanks,

Osu

HTML:

<form action="#" method="post" class="signup-form">
    <div class="required">
        <label for="name">Name:</label>
        <input type="text" name="cm-name" id="name" value=""><br />
    </div>
    <div class="required">
        <label for="asd-asd">Email:</label>
        <input type="text" name="cm-asd" id="asd-asd" value="">
        <span class="btn"><input type="submit" name="submit" value="" id="signup"></span>
    </div>          
</form>

JS:

// Validate form fields in Sign up form 
$(".signup-form").submit(function(){
    var isFormValid = true;
    $(".signup-form .required input").each(function(){
        if ($.trim($(this).val()).length == 0){
            $(this).parent().addClass("highlight");
            isFormValid = false;
        } else {
            $(this).parent().removeClass("highlight");
        }
    });
    if (!isFormValid) alert("Please fill in all the required fields (highlighted in red)");
    return isFormValid;
});

回答1:

Thanks for the answers, however, I found that the reason I was getting the error message was because the submit button had no value i.e. value="", so it was checking that input too. In order to rectify the problem, I had to make sure the submit function was checking only 'text' input types:

New JS:

// Validate form fields in Sign up form 
$(".signup-form").submit(function(){
    var isFormValid = true;
    $(".signup-form .required input:text").each(function(){ // Note the :text
        if ($.trim($(this).val()).length == 0){
            $(this).parent().addClass("highlight");
            isFormValid = false;
        } else {
            $(this).parent().removeClass("highlight");
        }
    });
    if (!isFormValid) alert("Please fill in all the required fields (highlighted in red)");
    return isFormValid;
});

回答2:

 $('#signup').click(function(event) {

 event.preventDefault(); 
//validate and if it is valid serialize the form
//else alert and return


var isFormValid = true;
    $(".signup-form .required input").each(function(index, value){
        if ($.trim($(value).val()).length == 0){
            $(value).parent().addClass("highlight");
            isFormValid = false;
        } else {
            $(value).parent().removeClass("highlight");
        }
    });

if(isFormValid ){
   $.post( 'validation.php', $('.signup-formt').serialize(), function( data ) {

  });
}else{
  alert("Please fill in all the required fields (highlighted in red)");
}
 });

回答3:

$('input').each(function(index, obj){
    if($(obj).val().length === 0) {
        $(obj).addClass('error');
    }
});

But I dont remember would it be obj or this.

回答4:

.each runs the script multiple times. for example if you have 3 empty inputs the script you are using adds class .highlight 3 times. if you want to keep your page light and clean give the script below a go.

check = function()
    {                
var empty = $(".signup-form .required input").filter(function() {
return this.value == ""; });//this checks if 1 or more inputs have no value
if(empty.length) {//to be applied if at least 1 input has no value
alert("Please fill in all the required fields (highlighted in red)");
$(".signup-form").addClass("highlight");
}else{
$(".signup-form").removeClass("highlight");
};}

This will alert the message ONCE if at least one input is empty. then simply add the function onclick to your submit input or any button you want to validate the form with.

<input type="submit" value="submit" onclick="check();">