jQuery的添加/表单提交之前除去用于确认所需的类

我有许多领域，其中两个字段是排序相互排斥的，即，形如一个是空的另一必须存在和相对是真的（但他们可以在同一时间）。我有提交前一个简单的验证检查，其扫描与class="required"（无插件）的所有字段，所以我实现下面的代码来执行一个场或其他的验证：jQuery的添加/表单提交之前除去用于确认所需的类

$('#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，一切工作正常。

我错过了什么？

来源

2011-03-02 Mr Shunz

ld1和＃field2是否具有所需的类？ – 2011-03-02 16:47:36

@Guilherme塞拉诺，＃field1开始为“必需”，而不是＃field2。但没关系，如果他们没有通过我的脚本修改它的作品...我认为@Detect是正确的顺便说一句，我现在正在测试它... – 2011-03-03 08:09:36

的问题是，它可以在此条件失败：

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

，如果它不能找到所需的类的任何元件，then.val（）返回关于[]和上未定义。长度被borked未定义。

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

所以，你会改变：

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

在你的HTML，#fie

来源

2011-03-02 16:43:15 Detect

就是这样！现在就像魅力一样。 – 2011-03-03 08:14:40

jQuery的添加/表单提交之前除去用于确认所需的类

回答

相关问题