jQueryvalidation – 一个asp.net表单上的多个提交按钮，不同的validation组？

我有一个带有登录部分和注册部分的asp.net表单。 有两个提交按钮对应于相应的部分，登录或注册。 我正在使用jqueryvalidation，但是我找不到像通常的asp.netvalidation那样​​指定validation组的方法。 当我点击注册按钮时，它现在要求填写登录字段。任何人对此有何想法？ 谢谢！

Answer 1

我猜你正在使用这个validation插件： JQuery Validation 。 该插件使用表单标记作为validation组，因此要完成您想要的操作，您需要根据用户推送的按钮删除规则。 此外，您需要为validation失败的情况添加规则，然后用户决定单击其他按钮。

这是一个例子：

$(document).ready(function() { $("#form").validate({ invalidHandler: addRules }); addRules(); $("#submit1").click(function(){ $(".group2").each(function(){ $(this).rules("remove"); }); }); $("#submit2").click(function(){ $(".group1").each(function(){ $(this).rules("remove"); }); }); }); var addRules = function(){ $("#input1").rules("add", {required:true}); $("#input2").rules("add", {required:true}); } 

此方法允许您向作为validation组的每个输入添加类属性（group1或group2）。

Answer 2

您可以使用以下库，而不必编写特定于页面的代码来解决此问题：

https://github.com/bbraithwaite/JQueryValidationForWebForms

NB源代码如下，但Github链接始终具有最新源。

它位于jQuery Validation Framework之上，并通过使用类名作为约定来抽象出这个问题。

您以与jQueryvalidation相同的方式注册validation事件（仅使用不同的名称）：

 $(function() { $("#aspForm").validateWebForm(); }); 

示例.ASPX

具有两个validation组的基本.aspx示例可能如下所示。 你只需要包装每个逻辑部分并给它一个类名“form”，并在应该触发validation事件的动作上添加类“submit”：

  
 
 
 
 
Sign Up
 
   
 
   
 
 
 
Login
 
   
 
   
  

源代码

 (function ($) { $.extend($.fn, { validateWebForm: function (options) { var form = $(this[0]), formExists = (form.length) && form.is('form'); if (formExists) { if (!options) { options = {}; } // stop the validation from firing on the form submit options.onsubmit = false; // wire up the default jquery validation event to the form this.validate(options); // Select any input[type=text] elements within a validation group // and attach keydown handlers to all of them. $('.form :text').keydown(function (event) { // Only execute validation if the key pressed was enter. if (event.keyCode == 13) { $(event.currentTarget).closest(".form").find(".submit").click(); } }); // find the submit buttons and override the click event form.getSumbitControls().click(this.validateAndSubmit); return this; } return undefined; }, getSumbitControls: function () { return $(this).find('.form .submit'); }, getValidationContainer: function (submitControl) { return $(submitControl).closest('.form'); }, validateAndSubmit: function (event) { // Ascend from the button that triggered this click event // until we find a container element flagged with // .validationGroup and store a reference to that element. var group = $(this).getValidationContainer(event.currentTarget), isValid = true; // Descending from that .form element, find any input // elements within it, iterate over them, and run validation on // each of them. group.find(':input').each(function (i, item) { if (!$(item).valid()) { isValid = false; } }); // If any fields failed validation, prevent the button's click // event from triggering form submission. if (!isValid) { event.preventDefault(); } } }); })(jQuery); 

Nuget用户

PM> Install-Package JQuery.Validation.WebForms

这是从Dave Ward的以下post中演变而来的：

http://encosia.com/asp-net-webforms-validation-groups-with-jquery-validation/

Answer 3

您总是可以使用一些简单的jquery / javascript来删除asp按钮OnClientClick上的“validate [required]”类，然后将其添加回其他按钮OnClientClick，这比更改validationengine文件或替换它们更容易。 一个例子是：

javascript将是：

 function disableReg() { $('#<%=txtName.ClientID%>').removeClass("validate[required]"); $('#<%=txtEmail.ClientID%>').removeClass("validate[required]"); $('#<%=txtUser.ClientID%>').addClass("validate[required]"); $('#<%=txtPass.ClientID%>').addClass("validate[required]"); return true; } function disableLogin() { $('#<%=txtUser.ClientID%>').removeClass("validate[required]"); $('#<%=txtPass.ClientID%>').removeClass("validate[required]"); $('#<%=txtName.ClientID%>').addClass("validate[required]"); $('#<%=txtEmail.ClientID%>').addClass("validate[required]"); return true; } 

Answer 4

跟踪validation对象并直接删除/替换规则。 适用于v1.13.0

 var validation = $('#form1').validate(); //Keep track of validation object //Rule set 1 var validationRulesLogin = { headerEmail: { required: true, email: true }, headerPassword: "required" }; var validationMessagesLogin = { headerEmail: { required: "Please enter your email address.", email: "Not a valid email address." }, headerPassword: "Please enter your password." }; //Rule set 2 var validationRulesSignup = { signupEmail: { required: true, email: true }, signupPassword: "required", signupPassword2: { equalTo: "#phBody_txtNewPassword" } }; var validationMessagesSignup = { signupEmail: { required: "Please enter your email address.", email: "Not a valid email address." }, signupPassword: "Please enter your password.", signupPassword2: "Passwords are not the same." }; //Toggle rule sets on form focus, button click or other event. function validatingLoginForm(){ validation.resetForm(); validation.settings.rules = validationRulesLogin; validation.settings.messages = validationMessagesLogin; } function validationSignupForm(){ validation.resetForm(); validation.settings.rules = validationRulesSignup; validation.settings.messages = validationMessagesSignup; } 

Answer 5

如果你使用不显眼的jqueryvalidation，或者你可以使用这个：

 $(document).ready(function () { var formValidator = $("form").validate(); $("#btnLogin").click(function () { formValidator.settings.ignore = "#registerSection *"; }); $("#btnRegister").click(function () { formValidator.settings.ignore = "#loginSection *"; }); }); 

Answer 6

通过在表示服务器端validation控件的HTML元素上附加特殊的CSS类名，使ASP.NET服务器validation逻辑可用于客户端/ jQuery。

生成的CSS类名称将表示validation组。 因此，例如，某些文本框将使用一个validation组的类名称和其他validation组的其他文本框进行标记。

例如，在Page PreRender处理程序中编写和调用此C＃函数，或者在呈现页面之前使用特殊的CSS灌注服务器控件。

 /// 
 /// Makes the server validation logic knowledge available to the client side /// by appending css class names to validators and html elements being validated. /// The generated css classes can be targeted by jQuery in the DOM. /// 
 /// prefix string for validator css names /// prefix string for target element css names ///  /// The css prefix arguments to this function help distinguish between what is a /// validation control and what is an html element being targeted by said validation control. ///  /// void TagValidationWithCss(string cssPrefixValidator, string cssPrefixTarget) { List valClasses = new List(); List targetClasses = new List(); // iterate over validator server controls foreach (BaseValidator val in Page.Validators) { // keep a unique list of generated validator css class names string classnameVal = cssPrefixValidator + val.ValidationGroup; if (!valClasses.Contains(classnameVal)) valClasses.Add(classnameVal); // ..and mark the validator element with the generated css class name val.CssClass += (string.IsNullOrEmpty(val.CssClass) ? "" : " ") + classnameVal; // keep a unique list of generated target element css class names string classnameTarg = cssPrefixTarget + val.ValidationGroup; if (!targetClasses.Contains(classnameTarg)) targetClasses.Add(classnameTarg); // ..and mark the target element with the generated css class name Control target = FindControl(val.ControlToValidate); if (target is HtmlControl) ((HtmlControl)target).Attributes["class"] += (string.IsNullOrEmpty(val.CssClass) ? "" : " ") + classnameTarg; else if (target is WebControl) ((WebControl)target).CssClass += (string.IsNullOrEmpty(val.CssClass) ? "" : " ") + classnameTarg; } // output client script having array of validator css names representing validation groups string jscriptVal = string.Format("", string.Join("','", valClasses.ToArray()), cssPrefixValidator); ClientScript.RegisterStartupScript(this.GetType(), "val", jscriptVal); //output client script having array of html element class names representing validation groups string jscriptTarg = string.Format("", string.Join("','", targetClasses.ToArray()), cssPrefixTarget); ClientScript.RegisterStartupScript(this.GetType(), "targ", jscriptTarg); } 

该函数在服务器端页面中调用：

 protected override void OnPreRender(EventArgs e) { base.OnPreRender(e); TagValidationWithCss("validator-", "target-"); } 

ASPX页面的声明性语法可能有两个部分，如下所示：

 
 Login Section    
 Registration Section   

---

现在转到渲染页面以查看结果…..

页面HTML源包含表示validation组的生成的CSS名称数组，一组用于validation器（validation器），另一组用于validation目标（目标 – ）

这些CSS名称也在html元素上呈现。 请注意此处文本框中的“target-vg1”CSS类，表示validation组＃1。 文本框表示页面上的登录屏幕/界面（两个UI部分之一）：

第二组文本框位于同一个ASP.NET页面上（在相同的ASP.NET窗体中），并表示用户注册屏幕/界面（第二个UI部分）。 请注意，这些文本框通过css类标记了名为“target-vg2”的不同validation组。

因此，我们将特殊的Css名称注入到ASP.NET流程中，而不会中断或破坏它。

最终，这个专门的输出允许你编写自定义脚本（即使用jQuery）来抓取那些特殊的CSS类名，并区分客户端的validation组。

这个简单的示例警告客户端validation组的名称，以certificate它们被看到和知道。 呼！

jQuery也可用于定位特殊的css类。

这并未涵盖所有情况。 这可能真的是午餐，但有趣的是。 服务器端和客户端代码需要调整为个人或项目品味。

（您还希望依赖于这样一个事实：较新的浏览器可以使用’class’属性将多个CSS类应用于一个元素，方法是使用空格分隔类名，例如 – class =“vg1 animated bright myclass your class”。这允许生成的css要在现有类名后面附加的类名而不覆盖它们。）