我是使用jQuery验证的新手程序员。我在更长的表格中有3个相关的下拉菜单(国家,州,城市)。选择/选项下拉菜单和表单元素都可以正常工作。当您尝试预先提交表单时,当然会按预期方式显示验证错误。
我遇到的问题是,当选择一个国家(如南极洲)时,州和城市的选择/选项下拉列表会动态更改为“不可用”。正如预期的那样,国家/地区选择/选项下拉菜单会立即消除错误。但是,该州和城市选择/选项下拉菜单的错误仍然存在于页面上。
删除国家/地区/选项下拉错误后,如何立即重新验证州和城市错误。或者,将值更改为文本“不可用”后,动态删除州和城市选择/选项下拉菜单中的错误?注意:如果我分别关注每个州和城市的下拉菜单,这些错误确实会清除。但是,它们不会独立运行。
我将尝试仅在此处粘贴必要的代码。请让我知道是否需要更多。如果可以的话请帮忙。预先谢谢大家。
这是html标记:
<form id="signup_form">
<fieldset>
<ul>
<li>
<fieldset id="countryfieldset">
<label>Country</label>
<select id="country" class="country" name="country">
<?php include("../countryAjaxData.php"); ?>
</select>
<label>State</label>
<select id="state" class="state" name="state">
<option value="" selected="selected">Select State</option>
</select>
<label>City</label>
<select id="city" class="city" name="city">
<option value="" selected="selected">Select City</option>
</select>
</fieldset>
</li>
<li><input type="submit" id="signup_now_index1"></li>
</ul>
</fieldset>
</form>
这是jQuery.validation插件:
$(document).ready(function() {
"use strict";
$.validator.setDefaults( {
submitHandler: function() {
}
});
$("#signup_form").validate( {
rules: {
country: {
required: true
},
state: {
required: true
},
city: {
required: true
},
},
messages: {
country: "Required",
state: "Required",
city: "Required",
},
onkeyup: function(element) {
if (!this.checkable(element)) {
this.element(element);
}
},
onfocusout: function(element) {
if (!this.checkable(element)) {
this.element(element);
}
},
ignore: ".ignore, :hidden",
errorElement: "div",
errorPlacement: function (error, element) {
var type = $(element).attr("type");
if (type === "radio") {
error.insertAfter(element).wrap('<div/>');
} else if (type === "checkbox") {
error.insertAfter(element).wrap('<div/>');
} else {
error.insertBefore(element).wrap('<div class="error_container"/>');
}
},
success: function (li, element, validClass) {
},
highlight: function (element, errorClass, validClass) {
},
unhighlight: function (element, errorClass, validClass) {
},
showErrors: function (errorMap, errorList) {
this.defaultShowErrors();
},
});
//These are a few of my many failed attempts.
//$('#country').on('change keyup', function(){
// var validator = $( "#signup_form" ).validate();
// validator.element( "#state" );
//$('#state').valid();
//});
//$('#country').on('change keyup', function(){
// $('#state').valid().delay(5000);
//});
});
我还尝试了许多我在SO和Web上研究过的东西,但不幸的是,没有一件事情奏效。这是我最近做过的几次尝试。
我试图在国家/地区选择/选项下拉菜单中添加更改,加高键,聚焦功能。这是尝试使国家/地区的选择/选项更改后重新验证州和城市的下拉菜单。
我还尝试过延迟州和城市的重新确认,因为考虑到国家/地区选择/选项更正后不久需要重新验证州和城市。
$('#country').on('change', function() {
$(document).on('mousemove', function() {
$('#state,#city').valid();
});
});
将此代码放在$(“#signup_form”)。validate({...})之后。如果还有更多字段,请将其放在$('fields_that_need_revalidation')。valid()函数中。我希望这会暂时有所帮助。