使用jQuery进行表单验证的所有表单元素的类

Question

我正在进行表单验证，默认情况下禁用提交按钮。 如果所有输入的类别均为“有效”，我想启用提交按钮。

我已经尝试过此代码，但是它不起作用。

$('input').each(function() {
    $(this).on('input', function() {
        if($(this).hasClass('valid') {
            // All the classes are valid.
            alert('Form is valid.');
        }
    });
});

另外，如果页面上有多个表单，我如何确保jQuery仅在该表单内部查找有效的类。 具有所有有效类的一种表单不应启用所有表单上的提交按钮。

这是问题的JSFiddle 。

Answer 1

编辑：我更新了您的jsfiddle ，并添加了对字段上每个keyup事件的检查。 该功能当然会忽略“提交”按钮。

---

旧答案：

您可以尝试以下代码：

function checkForm() {
  var valid = true;
  $('input','#myForm').each(function() {
        if(!$(this).hasClass('valid') {
            valid = false;
        }
  });
  return valid;
}

Answer 2

查看此更新的jsfiddle。 基本上，您需要跟踪哪些字段当前无效，因此我最初将无效类添加到每个输入。 在您的代码中，输入有效的电子邮件后，它将返回带有无效类的所有字段的列表。 如果该列表的长度为0，则从“提交”按钮中删除“ disabled”属性。

    var invalidFields = $('.invalid');
    if(invalidFields.length === 0) {    
        $('input[type=submit]').removeAttr('disabled');
    }

http://jsfiddle.net/Tt395/4/

Answer 3

看看我的变化。

http://jsfiddle.net/Gg92v/2/

很快，请检查您的表单，如下所示：

if($('#form1 input:not(.valid)').length == 0){
    $('button[type=submit]').prop('disabled',false)
}