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)

如果找不到具有所需类的任何元素，则then.val（）在[]上返回undefined，而在undefined上返回.length则为borked。

解决此问题的一种方法是更改字段以检查仅检查具有所需类的validate类的子元素。

所以你会改变：

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;        
  }      
});

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

1 个答案: