Javascript AJAX调用后,使用jQuery插件进行验证不起作用
我正在尝试使用jQuery插件验证表单。我在表格上有三个常用的选择框:国家、州和城市。通常,国家/地区选择框在页面加载时填充。使用Ajax在相应选择框的onchange事件上填充两个连续的选择框Javascript AJAX调用后,使用jQuery插件进行验证不起作用,javascript,jquery,ajax,jquery-plugins,jquery-validate,Javascript,Jquery,Ajax,Jquery Plugins,Jquery Validate,我正在尝试使用jQuery插件验证表单。我在表格上有三个常用的选择框:国家、州和城市。通常,国家/地区选择框在页面加载时填充。使用Ajax在相应选择框的onchange事件上填充两个连续的选择框 <div> <label> Country<span style="color: Red;">*</span></label> <select id="cmb_country" name="cmb_country" validat
<div>
<label> Country<span style="color: Red;">*</span></label>
<select id="cmb_country" name="cmb_country" validation="required" class="inputText" onchange="fillState(this.value,0);">
<option value=''>Select</option>
<?php $combo->combo("select country_id, country_name from country", 0);?>
</select>
</div>
<div class="clear"> </div>
<div>
<label> State<span style="color: Red;">*</span></label>
<span id="stateList">
<select id="cmb_state" name="cmb_state" validation="required" class="inputText" onchange="fillCity(this.value, 0);">
<option value=''>Select</option>
</select>
</span>
</div>
<div class="clear"> </div>
<div>
<label> City<span style="color: Red;">*</span></label>
<span id="cityList">
<select id="cmb_city" name="cmb_city" validation="required" class="inputText">
<option value=''>Select</option>
</select>
</span>
</div>
<div class="clear"> </div>
如果不使用Ajax,那么在使用Ajax填充所有选择框之后,如何使其正常工作?您似乎没有按照预期使用插件。您查看过各种官方演示中的代码吗?validate通过将$myForm.validate放在document.ready中而不是通过将.validate附加到每个字段来初始化整个表单。有关正确用法,请参阅的源代码。此外,无需在输入元素上创建名为validation=required的自定义属性。您只需向它们添加另一个名为.required的类。你让这一切变得难以置信的冗长。
var Form = function(form) {
var fields = [];
form.find("[validation]").each(function() {
var field = $(this);
if (field.attr('validation') !== undefined) {
fields.push(new Field(field));
}
});
this.fields = fields;
}
Form.prototype = {
validate: function() {
for (field in this.fields) {
this.fields[field].validate();
}
},
isValid: function() {
for (field in this.fields) {
if (!this.fields[field].valid) {
this.fields[field].field.focus();
return false;
}
}
return true;
}
}