我搜索了之前提出的所有问题并尝试了所有方法,但没有任何效果。我正在尝试让Jquery验证和ajax一起工作。基本上,ajax正在阻止验证的发生。另外:提交时(无论是否为空),框变为绿色。这是代码:
<script type="text/javascript">
function loadPage(urlToLoad, typeToLoad){
$.ajax({
url: urlToLoad,
type: typeToLoad,
data: $(this).serialize(),
success: function (data) {
$("#resultsMainWindow").html(data);
},
dataType: "html"
});
}
$(document).ready(function () {
$.validator.unobtrusive.parse($('#ZipForm'));
$.validator.unobtrusive.parse($('#ParishForm'));
$.validator.unobtrusive.parse($('#CityForm'));
$.validator.unobtrusive.parse($('#AgentNameForm'));
$('#ZipForm').submit(function () {
if ($(this).valid()) {
loadPage(this.action, this.method);
}
return false;
});
$('#CityForm').submit(function () {
if ($(this).valid()) {
loadPage(this.action, this.method);
}
return false;
});
$('#ParishForm').submit(function () {
if ($(this).valid()) {
loadPage(this.action, this.method);
}
return false;
});
$('#AgentNameForm').submit(function () {
if ($(this).valid()) {
loadPage(this.action, this.method);
}
return false;
});
$("#findAgentTabs").tabs();
jQuery.validator.addMethod("zipcodeUS", function (value, element) {
return this.optional(element) || /\d{5}-\d{4}$|^\d{5}$/.test(value);
}, "The specified US ZIP Code is invalid");
$("#ZipForm").validate({
rules: {
txtZip: {
required: true,
minlength: 5,
zipcodeUS: true
}
},
messages: {
txtZip: { minlength: "Zip code must be at least 5 digits.", required: "Please enter a valid zip code.", zipcodeUS: "Please enter a valid zip code." }
},
submitHandler: function (form) {
form.submit();
},
highlight: function (element) {
$(element).closest('input').removeClass('success').addClass('error');
},
success: function (element) {
$(element).closest('input').removeClass('error').addClass('success');
}
});
$("#CityForm").validate({
rules: {
txtCity: "required",
ddlState: "required"
},
messages: {
txtCity: "Please enter a city name.",
ddlState: "Please select a state."
},
submitHandler: function (form) {
form.submit();
},
highlight: function (element) {
$(element).closest('input').removeClass('success').addClass('error');
$(element).closest('select').removeClass('success').addClass('error');
},
success: function (element) {
$(element).closest('input').removeClass('error').addClass('success');
$(element).closest('select').removeClass('error').addClass('success');
}
});
$("#ParishForm").validate({
rules: {
ddlParish: "required"
},
messages: {
ddlParish: "Please select a parish."
},
submitHandler: function (form) {
form.submit();
},
highlight: function (element) {
$(element).closest('input').removeClass('success').addClass('error');
$(element).closest('select').removeClass('success').addClass('error');
},
success: function (element) {
$(element).closest('input').removeClass('error').addClass('success');
$(element).closest('select').removeClass('error').addClass('success');
}
});
$("#AgentNameForm").validate({
rules: {
txtName: "required"
},
messages: {
txtName: "Please enter an agents last name."
},
submitHandler: function (form) {
form.submit();
},
highlight: function (element) {
$(element).closest('input').removeClass('success').addClass('error');
},
success: function (element) {
$(element).closest('input').removeClass('error').addClass('success');
}
});
});
</script>
以下是其中一个标签的HTML:
<div id="ParishTab">
@Using (Ajax.BeginForm("FindAgentByParish", "FindAgent", New With {.id = "ParishForm"}, New AjaxOptions With { _
.HttpMethod = "Post", _
.OnBegin = "ajaxValidate", _
.InsertionMode = InsertionMode.Replace, _
.UpdateTargetId = "resultsMainWindow"}))
@<label>
<span>Parish:</span>
<select name="ddlParish" class="input required" id="ddlParish">
<option selected="selected" value="">Select A Parish</option>
<option value="010">......</option>
</select>
</label>
@Html.Hidden("caller", "agentresults")
@<input type="submit" class="submit" value="Search" />
End Using
</div>