如何檢查表格是否填寫在jQuery中？

Question

我有一個表單，一個提交按鈕和一個模式。 如果表單具有空值，我想運行模式以顯示消息。

我嘗試.each循環並檢查表單中是否有空輸入，但是即使表單已填滿，它仍然會返回為空。

我的HTML表單：

  <form id="register_form" role="form" >
    <label >First Name</label>
    <input id="inN"data-error="Enter first name." required>
    <div class="help-block with-errors"></div>
    </div>
    <label>Last Name</label>
    <input id="inL"  data-error="Enter last name." required>
    <div class="help-block with-errors"></div>
    </div>
    </div>
          <label for="inputEmail" class="control-label">Email</label>
          <input type="email" class="form-control" id="inputEmail" data-error="Enter email." required>
          <div class="help-block with-errors"></div>
       </div>
    </div>
</form>

這是我的javascript：

$('#register_form').each(function() {
            if ( $(this).val() === '' ){
                console.log($(this).val()); // empty even when form is not
                vm.message = 'One or Two fields are empty. Please fill up all fields'
                document.getElementById("message").textContent=vm.message; // message on the modal
            };


        });

Answer 1

嘗試下面的代碼

用下面的代碼替換jQuery選擇器

$('#register_form input')

您可以簡單地修復它。

Answer 2

您必須使用$('#register_form input').each而不是$('#register_form').each來循環瀏覽表單中存在的所有input字段。

請注意 ，如果您的真實form有select框或textarea區域，則需要相應地修改此代碼。 我還將建議您看看JQuery Validate插件，它可以為您完成所有這些工作。

 $(document).ready(function() { $("#submitButton").click(function() { ValidateForm(); }); }); function ValidateForm() { var formInvalid = false; $('#register_form input').each(function() { if ($(this).val() === '') { formInvalid = true; } }); if (formInvalid) alert('One or Two fields are empty. Please fill up all fields'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <form id="register_form" role="form"> <label>First Name</label> <input id="inN" data-error="Enter first name." required> <div class="help-block with-errors"></div> </div> <label>Last Name</label> <input id="inL" data-error="Enter last name." required> <div class="help-block with-errors"></div> </div> </div> <label for="inputEmail" class="control-label">Email</label> <input type="email" class="form-control" id="inputEmail" data-error="Enter email." required> <div class="help-block with-errors"></div> </div> </div> <button id="submitButton">Submit</button> </form> 

Answer 3

 var allInput = $('input');

    $.each(allInput,function(){
     //looping through all input assuming u have one form in the page  u can pass form id and grab input too
    if($(this).val() == ""){
    alert('empty');
//do something append error msgs etc
    } else {
    alert('you can go');
    }

    });

Answer 4

它始終在文本框中顯示空白值，因為當您的JavaScript代碼執行該操作時，所有文本框都會重置，請查看下面的圖片以獲取更多詳細信息。

Answer 5

<script>
$(document).ready(function() {
$('#signupForm')
    .formValidation({
        framework: 'bootstrap',
        err: {
            container: '#errors'
        },
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            firstName: {
                row: '.col-xs-4',
                validators: {
                    notEmpty: {
                        message: 'The first name is required'
                    }
                }
            },
            lastName: {
                row: '.col-xs-4',
                validators: {
                    notEmpty: {
                        message: 'The last name is required'
                    }
                }
            },
            username: {
                validators: {
                    notEmpty: {
                        message: 'The username is required'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 5 and less than 31 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: 'The username can only consist of alphabetical, number, dot and underscore'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required'
                    },
                    emailAddress: {
                        message: 'The email address is not valid'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    },
                    different: {
                        field: 'username',
                        message: 'The password cannot be the same as username'
                    }
                }
            },
            gender: {
                validators: {
                    notEmpty: {
                        message: 'The gender is required'
                    }
                }
            },
            bio: {
                validators: {
                    stringLength: {
                        max: 300,
                        message: 'The bio must be less than 300 characters long'
                    }
                }
            }
        }
    })
    .on('err.form.fv', function(e) {
        // Show the message modal
        $('#messageModal').modal('show');
    });
  });
 </script>

演示