Question

我有一个表格，分为几个部分。当用户填写表单时，我想在完成时标记每个部分。

要完成，所有必填字段必须通过客户端验证。

不需要验证的字段具有“ignore”类。

已通过验证的字段已通过验证码添加了“成功”类。

所以我想检查一个给定的表单部分，查看没有“ignore”或“success”作为类的任何表单元素。如果有任何此类元素，则该部分不完整。

这是我的代码：

$('.form-section input, .form-section select, .form-section textarea').blur(function() {

    //get containing form section
    formSection = $(this).closest('.form-section');
    //Check for any inputs, selects and textareas that don't have "ignore" or "success"  as a class
    sectionCheck = $(formSection).find('input,select,textarea').not('.ignore','.success').length;
    if(sectionCheck > 0) {alert('not done yet');}
    else{alert('section complete');}    
});

它适用于静态HTML。但是在实时代码中，它没有看到“成功”类，因为该类是动态添加的。

我想我需要以某种方式使用on（）方法，但我不确定如何，因为问题不是blur（）事件。

感谢您的帮助！

Answer 1

何时在字段上进行验证？因为如果在模糊事件之后进行验证，您将无法检测到“成功”类的添加

Answer 2

尝试添加dynamic类，然后在获得结果时将其过滤掉。

Answer 3

我想你想做这样的事情

Fiddle

您将不得不假设每个字段都很糟糕，并且有一些东西可以验证每个相关字段，因为它“模糊”。但是，当触摸/修饰相关元素时，您应该将其标记为脏以便重新验证

.on('focus', 'input,select,textarea', function () {
    //mark dirty on focus
    ...
}) 
.on('blur', 'input,select,textarea', function () {
    // validate on blur
    ...
});

Answer 4

事实证明我在实时网站中使用的是旧版本的代码，并且在jQuery中有一个拼写错误。我错误地格式化了“not（）”语句。

sectionCheck = $（formSection）.find（'input，select，textarea'）。not（'。ignore'，'。success'）。length;

应该是：

sectionCheck = $（formSection）.find（'input，select，textarea'）。not（'。ignore，.success'）。length;

现在工作正常。

感谢所有回答的人。

尝试选择没有动态添加类的子元素

4 个答案:

Fiddle