当用户选择“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; }
让它自动验证是很好的,但是我总是遇到一些奇怪的业务逻辑规则,不会被通用验证方法所捕获.这样做可以让我按照我想要的方式来控制所有的验证,但是绝大多数时间都依赖于内置的验证.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。