当用户选择“GO”按钮时,我希望能够在客户端触发表单验证.目前当选择“GO”按钮时,它不会验证完整的表单.例如,如果我加载表单并选择“Go”按钮,而不将焦点放在文本框中,则不会验证任何内容,val.Valid()将返回true.如果我在文本框中输入无效数据,则对该单个项目执行验证;当我选择“GO”按钮时,val.Valid()返回false.
所以我想要做的是当用户选择一个按钮或其他事件时,我想触发所有的窗体验证.
我在MVC 3中这样做
public class TestValidationModel
{
[required(ErrorMessage="UserName Is required")]
[RegularExpression(@"(\S)+",ErrorMessage = "White space is not allowed")]
[StringLength(12,MinimumLength = 3)]
public string UserName { get; set; }
[required(ErrorMessage="Password Is required")]
[StringLength(20,MinimumLength = 3)]
public string Password { get; set; }
[required(ErrorMessage="Email Address Is required")]
[Display(Name = "Email Address")]
public string EmailAddress{ get; set; }
}
<script src="/BasicMvc3Example2/Scripts/jquery-1.4.4.js" type="text/javascript"></script>
<script src="/BasicMvc3Example2/Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="/BasicMvc3Example2/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/BasicMvc3Example2/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#butValidateForm").click(function(){
var val = $('#myForm').validate()
alert(val.valid());
})
});
</script>
@using (Html.BeginForm("","",FormMethod.Post,new {id = "myForm"}))
{
<div>
@Html.LabelFor(m => m.UserName)
@Html.TextBoxFor(m => m.UserName)
@Html.ValidationMessageFor(m => m.UserName)
</div>
<div>
@Html.LabelFor(m => m.Password)
@Html.TextBoxFor(m => m.Password)
@Html.ValidationMessageFor(m => m.Password)
</div>
<div>
@Html.LabelFor(m => m.EmailAddress)
@Html.TextBoxFor(m => m.EmailAddress)
@Html.ValidationMessageFor(m => m.EmailAddress)
</div>
<button id="butValidateForm">GO</button>
<input type="submit" id="submitForm" value="Submit" />
}
更新
我想我找到了解决我的问题.请参见下面的showErrors
<script type="text/javascript">
$(function () {
$("#butValidateForm").click(function () {
var val = $('#myForm').validate();
val.showErrors(); //<-- Call showErrors
alert(val.valid());
})
});
</script>
以下链接到JQuery表单上的帖子不符合我的问题,但我能够找到我正在寻找的方法名称.
http://plugins.jquery.com/content/jqueryvalidate-showerrors-issue-form-wizard
如果有人有更好的答案,请提供反馈.
更新
以前的代码在Firefox中有一些作用,但在IE中却没有.我做了以下工作,它现在在Firefox中仍然没有ID
$(function () {
$("#myForm").submit(function (e) {
var val = $('#myForm').validate(); //<--added the semi-colon
val.showErrors();
alert(val.valid());
e.preventDefault();
});
});
// $("#butValidateForm").click(function () {
// var val = $('#myForm').validate()
// val.showErrors();
// alert(val.valid());
// })
});
感谢Using jQuery To Hijack ASP.NET MVC Form Posts指出我正确的方向.但还不完美
解决方法
我不知道这是否是最好的/最有效的方式,但是我通过在我自己的功能中单独验证每个元素来实现.
jQuery(document).ready(function () {
$("#butValidateForm").button().click(function () { return IsMyFormValid(); });
$('#myForm').validate();
}
function IsMyFormValid() {
var isValid = false;
isValid = $('#myForm').validate().element($('#UserName '));
isValid = ($('#myForm').validate().element($('#Password '))) ? isValid : false;
isValid = ($('#myForm').validate().element($('#EmailAddress'))) ? isValid : false;
return isValid;
}
让它自动验证是很好的,但是我总是遇到一些奇怪的业务逻辑规则,不会被通用验证方法所捕获.这样做可以让我按照我想要的方式来控制所有的验证,但是绝大多数时间都依赖于内置的验证.
