jQuery在表单提交之前添加/删除验证所需的类

Question

我有一个包含许多字段的表单，其中两个字段有点互斥，即如果一个为空，则另一个必须存在，反之则为是的（但它们可以同时出现）。我在提交之前有一个简单的验证检查，它使用class="required"（无插件）扫描所有字段，所以我实现了以下代码来执行一个字段或另一个的验证：

$('#field1').keyup(function(){
  if ($(this).val().length > 0) {
    $('#field2').removeClass('required');
    $(this).addClass('required');
  }      
});

$('#field2').keyup(function(){
  if ($(this).val().length > 0) {
    $(this).addClass('required');
    $('#field1').removeClass('required');
  }
});

其中#field1 和#field2 是两个互斥字段。

我已经检查了 Firebug，并且已正确添加/删除了这些类。

问题是：

如果我触发了一个或另一个字段，我的表单将被提交即使其他必填字段留空。

验证码是：

$('form').submit(function(){
var fields = $('.validate');
var ret_value = true;
$.each(fields, function(){
  if ($(this).find('.required').val().length < 1) {
    $(this).find('.errors').html('Campo obbligatorio!');
    ret_value = false;        
  }      
});
return ret_value;

});

必填输入字段的 html 是：

<span class="validate">
   <label for="field">Required Field</label>
   <input name="field" id="field" class="required">
   <span class="errors"></span>
</span>

如果我不使用上面的代码添加/删除required 类，表单验证将正确执行。

如果我在我设置的 Firebug 中设置断点

ret_value = false;

代码被执行，但由于某种原因它永远不会执行

return ret_value;

另外，检查 Firebug 中的 fields 变量，我可以看到正确的条目。

如前所述，如果我不修改#field1和#field2，一切正常。

我错过了什么？

Answer 1

问题是它可能会在这个条件下失败：

if ($(this).find('.required').val().length < 1)

如果它找不到任何具有所需类的元素，则.val() 在 [] 上返回 undefined 并且 undefined 上的 .length 被破坏。

解决此问题的一种方法是将字段更改为仅使用所需类检查验证类的子元素。

所以你会改变：

var fields = $('.validate');

到：

var fields = $('.validate > .required');

还有……

$.each(fields, function(){
  if ($(this).find('.required').val().length < 1) {
    $(this).find('.errors').html('Campo obbligatorio!');
    ret_value = false;        
  }      
});

到：

$.each(fields, function(){
  if ($(this).val().length < 1) {
    $(this).siblings('.errors').html('Campo obbligatorio!');
    ret_value = false;        
  }      
});