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字段。

请注意，如果您的真实select中有textarea个框或form字段，则需要相应地修改此代码。我还建议您查看JQuery Validate插件，它可以为您完成所有这些工作。

＆＃13;

$(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');
}

＆＃13;

<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>

＆＃13;

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>

Demo

如何检查表单是否填充在jquery中？

5 个答案: