使用 jquery 检查表单输入值答案

【问题标题】：Checking form input values with jquery使用 jquery 检查表单输入值
【发布时间】：2016-03-21 00:12:10
【问题描述】：

我有一个表单，我希望 jquery 检查并查看具有所需类的输入/选择值（这些类在 #customerForm 表单中）是否为空白。如果是，我想阻止表单提交并将输入/选择框的颜色更改为红色。如果所有具有所需类的输入/选择值都有值，我想提交表单，淡出表单输入并淡入下一个表单。这是我的代码：

$('#customerForm').submit(function (event) {
    var value = $('.required').each();
    if (value === "") {
        value.addClass("invalid");
        return false;
    } else {
        value.removeClass("invalid");
        $('#billForm, #shipForm').fadeOut();
        $('#payment-form').fadeIn();
    }
});

问题是表单不检查输入值并提交表单。任何帮助都会很棒。

【问题讨论】：

标签： jquery html forms

【解决方案1】：

$('.required').each() 返回一个输入数组。

在提交表单之前，您必须遍历每个输入并检查值。

$( ".required" ).each(function() {
  //validation
});

更完整的例子：

$('#customerForm').submit(function (event) {
  var error = false;
  $( ".required" ).each(function() {
    if ($(this).val() === "") 
    {
      $(this).addClass("invalid");
      error = true;
    } 
    else 
    {
      $(this).removeClass("invalid");
    }
  });
  if(!error)
  {
    $('#billForm, #shipForm').fadeOut();
    $('#payment-form').fadeIn();
  }
  else
  {
    return false;
  }
});

【讨论】：

奇怪。如果所有输入字段均为空白，则显示无效类别。但是，如果我输入一个输入值或全部并按下提交，表单会提交并将我带到我的表单处理页面（我不想要这个）。
抱歉，可能是 this 应该是 $(this) 导致了这个问题，很高兴你让它工作

【解决方案2】：

你不能使用每个来抓取一个字段。每个都是迭代它们。

所以你需要这样做。

 $('#customerForm').submit(function (event) {
     var value = $('.required'); // Get all the required fields
     var cnt=0; // setup a counter
     // Loop therough required fields and apply error class based on value
     $.each(value, function(i,val){
           if (val.val() === "") {
             cnt++;//add to the count of invalid fields
             val.addClass("invalid");// apply error class
           } else {
             val.removeClass("invalid");
           }
     });
     // Check the cnt variable is larger than 0, means we have errors
     if(cnt!=0){
          return false;
     // otherwise, continue
     } else {
        $('#billForm, #shipForm').fadeOut();
        $('#payment-form').fadeIn();
     }
});

【讨论】：

【解决方案3】：

你应该像这样遍历每个元素

$('.required').each((function( index ) {
var error = 0;
value = $(this).html();
if (value === "") {
    this.addClass("invalid");
    error = 1;
} else {
    this.removeClass("invalid");
    $('#billForm, #shipForm').fadeOut();
    $('#payment-form').fadeIn();
}
if (error)
    return false;
});

【讨论】：