jQuery在表单提交之前添加/删除所需的类以进行验证 [英] jQuery add/remove required class for validation before form submission

问题描述

我有一个包含许多字段的表单，其中两个字段互斥( 个)，即，如果一个字段为空，则另一个必须出现，而相反的字段是正确(但可以同时出现 ).我在提交之前进行了简单的验证检查，该检查使用class="required"(无插件)扫描了所有字段，因此我实现了以下代码来执行一个字段或另一个的验证:

I have a form with many fields in which two of these fields are sort of mutually exclusive, i.e. if one is empty the other must be present and the opposite is true (but they can be present at the same time). I have a simple validation check before submission which scans all fields with class="required" (no plugin), so i implemented the following code to perform validation of one field or the other:

$('#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是两个互斥的字段.

where #field1 and #field2 are the two mutually exclusive fields.

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

I've checked with Firebug and the classes are correctly added/removed.

问题是:

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

if I trigger one or the other field, my form gets submitted even if other required fields are left blank.

验证代码为:

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

where a required input field's html is:

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

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

Form validation performs correctly if I don't add/remove the required class with the code above.

如果我在设置了Firebug的地方设置了断点

If i set a breakpoint in Firebug where I set

ret_value = false;

代码被执行，但是由于某种原因它永远无法执行

code gets executed, but for some reason it never gets to

return ret_value;

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

Also, inspecting the fields variable in Firebug I can see the correct entries.

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

As I stated before, if I don't modify #field1 and #field2, everything works correctly.

我想念什么?

推荐答案

问题在于，在以下条件下它可能会失败:

The problem is that it can fail on this conditional:

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

如果找不到具有所需类的任何元素，则.val()在[]上返回undefined，而在undefined上的.length被拒绝.

if it cannot find any elements with the required class, then.val() returns undefined on [] and .length on undefined is borked.

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

One way to solve this is to change the fields to only check the child elements of the validate class with the required class.

因此您将更改:

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在表单提交之前添加/删除所需的类以进行验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！