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

编辑：我更新了your 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)
}

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

3 个答案: