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

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

 $('#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进行了检查，并且正确添加/删除了类。

问题是 ：

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

validation码是：

 $('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是：

  Required Field    

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

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

 ret_value = false; 

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

 return ret_value; 

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

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

我错过了什么？

Answer 1

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

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

如果它找不到具有所需类的任何元素，则.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; } });