在ASP.NET控件使用Ajax / jQuery的表单验证 [英] Using ajax/jQuery Form Validation on ASP.NET controls
本文介绍了在ASP.NET控件使用Ajax / jQuery的表单验证的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
好日子
我使用的是ASP.NET页面与母版页。我想做的输入字段直播的形式验证（）。现在所有的TUTS和演示/插件，我已经看到了使用普通的HTML标签。我试图实现他们中的一些我的形式，但他们没有工作。 （我使用的是母校页面和正常的aspx web表单...）
更新：问题与ASP控制取代input标签的密码字段...
原来的输入元素
＆LT;＆字段集GT;
＆LT;传奇＆GT;验证一个完整的形式＆LT; /传说＆GT;
＆所述p为H.;
＆LT;标签=名字＆GT;＆名字LT; /标签＆gt;
＆LT;输入ID =名字NAME =名字类型=文本/＆GT;
＆所述; / P＆GT;
＆所述p为H.;
＆LT;标签=姓氏＆GT;＆姓氏LT; /标签＆gt;
＆LT;输入ID =姓氏NAME =姓氏类型=文本/＆GT;
＆所述; / P＆GT;
＆所述p为H.;
＆LT;标签=用户名＆GT;用户名和LT; /标签＆gt;
＆LT;输入ID =用户名NAME =用户名类型=文本/＆GT;
＆所述; / P＆GT;
＆所述p为H.;
＆LT;标签=密码＆GT;密码和LT; /标签＆gt;
＆LT;输入ID =密码NAME =密码TYPE =密码/＆GT;
＆所述; / P＆GT;
＆所述p为H.;
＆LT;标签=confirm_password＆GT;确认密码＆LT; /标签＆gt;
＆LT;输入ID =confirm_passwordNAME =confirm_passwordTYPE =密码/＆GT;
＆所述; / P＆GT;
＆所述p为H.;
＆LT;标签=电子邮件＆GT;电子邮件和LT; /标签＆gt;
＆LT;输入ID =电子邮件NAME =电子邮件TYPE =电子邮件/＆GT;
＆所述; / P＆GT;
＆所述p为H.;
＆LT;标签=同意＆gt;请同意我们的政策＆lt; /标签＆gt;
＆LT;输入类型=复选框级=复选框ID =同意NAME =同意/＆GT;
＆所述; / P＆GT;
＆所述p为H.;
其中p标签=通讯I标记希望收到的简讯＆LT; /标签＆gt;
＆LT;输入类型=复选框级=复选框ID =通讯NAME =通讯/＆GT;
＆所述; / P＆GT; ＆所述; TR＆GT;
＆LT; TD类=tdRight＆GT;＆LT; ASP：标签ID =LabelEmail=服务器文本=电邮地址（用作用户名）：＆GT;＆LT; / ASP：标签＆gt;＆LT; / TD＆GT;
＆LT; TD类=tdLeft＆GT;＆LT; ASP：文本框名称=电子邮件TYPE =电子邮件ID =TextBoxEmail=服务器的ClientIDMode =静态的TextMode =单线MAXLENGTH =50 ＆GT;＆LT; / ASP：文本框＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD类=tdRight＆GT;＆LT; ASP：标签ID =Label1的=服务器文本=邮政地址：＆GT;＆LT; / ASP：标签＆gt;＆LT; / TD＆GT;
＆LT; TD类=tdLeft＆GT;＆LT; ASP：文本框ID =TextBoxPostal=服务器的ClientIDMode =静态的TextMode =多行行=4MAXLENGTH =250＆GT;＆LT; / ASP：文本框＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT; ＆所述; TR＆GT;
＆LT; TD类=tdRight＆GT;＆LT; ASP：标签ID =LabelPassword=服务器文本=密码：＆GT;＆LT; / ASP：标签＆gt;＆LT; / TD＆GT;
＆LT; TD类=tdLeft＆GT;＆LT; ASP：文本框名称=密码TYPE =密码ID =TextBoxPassword=服务器的ClientIDMode =静态的TextMode =密码MAXLENGTH =50 ＆GT;＆LT; / ASP：文本框＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD类=tdRight＆GT;＆LT; ASP：标签ID =LabelConfirmPassword=服务器文本=确认密码：＆GT;＆LT; / ASP：标签＆gt;＆LT; / TD＆GT;
＆LT; TD类=tdLeft＆GT;＆LT; ASP：文本框名称=confirm_passwordTYPE =密码ID =TextBoxConfirmPassword=服务器的ClientIDMode =静态的TextMode =密码MAXLENGTH =50 ＆GT;＆LT; / ASP：文本框＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;＆LT; /字段集＆GT;
我想用下面的ASP控制来取代上述
＆LT; TR＆GT;
＆LT; TD类=tdRight＆GT;＆LT; ASP：标签ID =LabelEmail=服务器文本=电邮地址（用作用户名）：＆GT;＆LT; / ASP：标签＆gt;＆LT; / TD＆GT;
＆LT; TD类=tdLeft＆GT;＆LT; ASP：文本框名称=电子邮件TYPE =电子邮件ID =TextBoxEmail=服务器的ClientIDMode =静态的TextMode =单线MAXLENGTH =50 ＆GT;＆LT; / ASP：文本框＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD类=tdRight＆GT;＆LT; ASP：标签ID =Label1的=服务器文本=邮政地址：＆GT;＆LT; / ASP：标签＆gt;＆LT; / TD＆GT;
＆LT; TD类=tdLeft＆GT;＆LT; ASP：文本框ID =TextBoxPostal=服务器的ClientIDMode =静态的TextMode =多行行=4MAXLENGTH =250＆GT;＆LT; / ASP：文本框＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD类=tdRight＆GT;＆LT; ASP：标签ID =LabelPassword=服务器文本=密码：＆GT;＆LT; / ASP：标签＆gt;＆LT; / TD＆GT;
＆LT; TD类=tdLeft＆GT;＆LT; ASP：文本框名称=密码TYPE =密码ID =TextBoxPassword=服务器的ClientIDMode =静态的TextMode =密码MAXLENGTH =50 ＆GT;＆LT; / ASP：文本框＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD类=tdRight＆GT;＆LT; ASP：标签ID =LabelConfirmPassword=服务器文本=确认密码：＆GT;＆LT; / ASP：标签＆gt;＆LT; / TD＆GT;
＆LT; TD类=tdLeft＆GT;＆LT; ASP：文本框名称=confirm_passwordTYPE =密码ID =TextBoxConfirmPassword=服务器的ClientIDMode =静态的TextMode =密码MAXLENGTH =50 ＆GT;＆LT; / ASP：文本框＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
现在一切正常，除了密码fiels？为什么？此外，ID的并不重要，因为在名称和类型字段的验证工作......
jQuery的：
＆LT;脚本类型=文/ JavaScript的＆GT;
$ .validator.setDefaults（{
submitHandler：函数（）{警报（提交的！）; }
}）; $（）。就绪（函数（）{
//验证上KEYUP注册表格并提交
$（形式）。验证（{
规则：{
姓：必需的，
名字：必需的，
用户名： {
要求：真实，
MINLENGTH个：2
}，
密码：{
要求：真实，
MINLENGTH个：5
}，
确认密码： {
要求：真实，
MINLENGTH个：5，
equalTo：#Password来
}，
电子邮件：{
要求：真实，
电子邮件：真
}，
话题： {
要求：#newsletter：勾选
MINLENGTH个：2
}，
同意：需要
}，
消息：{
姓：请输入你的名字，
名字：请输入您的姓氏
用户名： {
要求：请输入用户名，
MINLENGTH到：您的用户名必须至少包含2个字符的
}，
密码：{
要求：请输入密码
MINLENGTH到：您的密码必须至少为5个字符长
}，
确认密码： {
要求：请输入密码
MINLENGTH到：您的密码必须至少为5个字符长，
equalTo：请按上述输入相同的密码
}，
电子邮件：请输入一个有效的电子邮件地址
同意：请接受我们的政策
}
}）; //结合第一代和姓氏建议用户名
$（＃用户名）。对焦（函数（）{
VAR名字= $（＃名字）VAL（）。
VAR姓氏= $（＃姓氏）VAL（）。
如果（名字和放大器;＆安培;姓氏和放大器;＆安培;！THIS.VALUE）{
THIS.VALUE =名字+。 +姓氏;
}
}）; // code隐藏选题，禁用演示
VAR通讯= $（＃通讯）;
//通讯主题是可选的，隐藏在第一
VAR inital = newsletter.is（：检查）;
VAR主题= $（＃newsletter_topics）inital？ removeClass移除：addClass（灰色）;
。VAR topicInputs = topics.find（输入），ATTR（！已禁用，inital）;
//显示当通讯被选中
newsletter.click（函数（）{
主题[this.checked？ removeClass移除：addClass（灰色）;
topicInputs.attr（！已禁用，this.checked）;
}）;
}）;
＆LT; / SCRIPT＆GT;
真正呈现的HTML（有关表格）
＆LT;脚本SRC =https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =脚本/ jquery.validate.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$ .validator.setDefaults（{
submitHandler：功能（）{
警报（提交的！）;
}
}）; $（）。就绪（函数（）{
//验证上KEYUP注册表格并提交
$（形式）。验证（{
规则：{
姓：必需的，
名字：必需的，
用户名： {
要求：真实，
MINLENGTH个：2
}，
密码：{
要求：真实，
MINLENGTH个：5
}，
确认密码： {
要求：真实，
MINLENGTH个：5，
equalTo：#Password来
}，
电子邮件：{
要求：真实，
电子邮件：真
}，
话题： {
要求：#newsletter：勾选
MINLENGTH个：2
}，
同意：需要
}，
消息：{
姓：请输入你的名字，
名字：请输入您的姓氏
用户名： {
要求：请输入用户名，
MINLENGTH到：您的用户名必须至少包含2个字符的
}，
密码：{
要求：请输入密码
MINLENGTH到：您的密码必须至少为5个字符长
}，
确认密码： {
要求：请输入密码
MINLENGTH到：您的密码必须至少为5个字符长，
equalTo：请按上述输入相同的密码
}，
电子邮件：请输入一个有效的电子邮件地址
同意：请接受我们的政策
}
}）; //结合第一代和姓氏建议用户名
$（＃用户名）。对焦（函数（）{
VAR名字= $（＃名字）VAL（）。
VAR姓氏= $（＃姓氏）VAL（）。
如果（名字和放大器;＆安培;姓氏和放大器;＆安培;！THIS.VALUE）{
THIS.VALUE =名字+。 +姓氏;
}
}）; // code隐藏选题，禁用演示
VAR通讯= $（＃通讯）;
//通讯主题是可选的，隐藏在第一
VAR inital = newsletter.is（：检查）;
VAR主题= $（＃newsletter_topics）inital？ removeClass移除：addClass（灰色）;
。VAR topicInputs = topics.find（输入），ATTR（！已禁用，inital）;
//显示当通讯被选中
newsletter.click（函数（）{
主题[this.checked？ removeClass移除：addClass（灰色）;
topicInputs.attr（！已禁用，this.checked）;
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT;形式方法=获得行动=SignupPersonal.aspxID =aspnetForm
类=cmxform＆GT;
＆LT; DIV CLASS =aspNetHidden＆GT;
＆LT;输入类型=隐藏的名字=__ VIEWSTATEID =__ VIEWSTATE value=\"/wEPDwULLTIwMjk5MTc4MzEPZBYCZg9kFgICBQ9kFgICAQ9kFgICMA8QDxYGHg1EYXRhVGV4dEZpZWxkBQ9FbnVtRGVzY3JpcHRpb24eDkRhdGFWYWx1ZUZpZWxkBQlFbnVtVmFsdWUeC18hRGF0YUJvdW5kZ2QQFQMFRW1haWwlTm90aWZpY2F0aW9uIHZpYSBNb2JpbGUgVGV4dCBNZXNzYWdlcwRCb3RoFQMBMAExATIUKwMDZ2dnZGRksmDjLifKF4+hMs8AhfX/bwcgvt2QqQRuZWngXcH7AGM=\"
/＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =aspNetHidden＆GT;
＆LT;输入类型=隐藏的名字=__ EVENTVALIDATIONID =__ EVENTVALIDATION value=\"/wEdABBfr2cGXQNKgk5u/suiS/eBMBPtPHD3IbRvk+yxeYb2457gKW6aCQ3yNBTG9LyKZ4cubOXF5tOYlsiIBcyrDbyQ4wKHhHIVKN2DCQeFUhf9fWAUCuZOob8WzLZCHNXad+6lH/vCaPfCLoThuEr+9Jzl6wAt6cuJ+L+27/Nrmm6upAz//swWW9Bijj8L66VLU8Xqa57A90pLu4vVlIQKRMNCPMnVTRV7QuT7xghzXApY9g0EIzfFocd5Qmeb8RCzKLnYNu/sHr3w5Hv9l1IOx6mNGOqE5LWQWcaFAwIxNHVtD2pkSrWzz9gkUQepnHOZG7M83cV/FFqhRADq7X7PITxLg4JwtYX8Yw9N8ZivtSz9f1K3117QXOtSn4MTHtKkNBE=\"
/＆GT;
＆LT; / DIV＆GT;
＆LT; DIV ID =signupPersonal＆GT;
＆LT;表＆gt;
＆所述; TR＆GT;
＆所述; TD类=tdRight＆GT;＆下;跨度的id =ctl00_ContentPlaceHolder1_LabelName＆GT;名称：或其可/跨度＆GT; ＆LT; / TD＆GT;
＆LT; TD类=tdLeft＆GT;
＆LT;输入名称=$ ctl00 $ ContentPlaceHolder1 TextBoxName类型=文本MAXLENGTH =50
ID =TextBoxNameNAME =名字/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD类=tdRight＆GT;＆下;跨度的id =ctl00_ContentPlaceHolder1_LabelSurname＆GT;姓：或其可/跨度＆GT; ＆LT; / TD＆GT;
＆LT; TD类=tdLeft＆GT;
＆LT;输入名称=$ ctl00 $ ContentPlaceHolder1 TextBoxSurname类型=文本MAXLENGTH =50
ID =TextBoxSurname级=需要/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD类=tdRight＆GT;＆下;跨度的id =ctl00_ContentPlaceHolder1_LabelPin＆GT; preferred管脚：或其可/跨度＆GT; ＆LT; / TD＆GT;
＆LT; TD类=tdLeft＆GT;
＆LT;输入名称=$ ctl00 $ ContentPlaceHolder1 TextBoxPinTYPE =密码MAXLENGTH =10
ID =TextBoxPin级=需要/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD类=tdRight＆GT;＆LT;跨度ID =ctl00_ContentPlaceHolder1_LabelConfirmPin＆GT;确认PIN：其中; / SPAN＆GT; ＆LT; / TD＆GT;
＆LT; TD类=tdLeft＆GT;
＆LT;输入名称=$ ctl00 $ ContentPlaceHolder1 TextBoxConfirmPinTYPE =密码
MAXLENGTH =10ID =TextBoxConfirmPin级=需要/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD类=tdRight＆GT;＆下;跨度的id =ctl00_ContentPlaceHolder1_LabelPhoneNo＆GT;家庭数量：其中; /跨度＆GT; ＆LT; / TD＆GT;
＆LT; TD类=tdLeft＆GT;
＆LT;输入名称=$ ctl00 $ ContentPlaceHolder1 TextBoxPhoneNo类型=文本MAXLENGTH =20
ID =TextBoxPhoneNo级=需要的数字/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD类=tdRight＆GT;＆下;跨度的id =ctl00_ContentPlaceHolder1_LabelMobileNo＆GT;细胞数量：其中; /跨度＆GT; ＆LT; / TD＆GT;
＆LT; TD类=tdLeft＆GT;
＆LT;输入名称=$ ctl00 $ ContentPlaceHolder1 TextBoxMobileNo类型=文本MAXLENGTH =20
ID =TextBoxMobileNo级=需要的数字/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD类=tdRight＆GT;＆LT;跨度ID =ctl00_ContentPlaceHolder1_LabelIDNumber＆GT;身份证号码：其中; / SPAN＆GT; ＆LT; / TD＆GT;
＆LT; TD类=tdLeft＆GT;
＆LT;输入名称=$ ctl00 $ ContentPlaceHolder1 TextBoxIDNumber类型=文本MAXLENGTH =20
ID =TextBoxIDNumber级=需要的数字/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD类=tdRight＆GT;＆LT;跨度ID =ctl00_ContentPlaceHolder1_LabelEmail＆GT;邮箱地址（用作用户名）：其中; / SPAN＆GT; ＆LT; / TD＆GT;
＆LT; TD类=tdLeft＆GT;
＆LT;输入名称=$ ctl00 $ ContentPlaceHolder1 TextBoxEmailMAXLENGTH =50ID =TextBoxEmail
NAME =电子邮件TYPE =电子邮件/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD类=tdRight＆GT;＆LT;跨度ID =ctl00_ContentPlaceHolder1_Label1＆GT;邮寄地址：＆LT; / SPAN＆GT; ＆LT; / TD＆GT;
＆LT; TD类=tdLeft＆GT;
＆LT; textarea的名字=$ ctl00 $ ContentPlaceHolder1 TextBoxPostal行=4COLS =20
ID =TextBoxPostal＆GT;＆下; / textarea的＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD类=tdRight＆GT;＆下;跨度的id =ctl00_ContentPlaceHolder1_LabelPassword＆GT;密码：或其可/跨度＆GT; ＆LT; / TD＆GT;
＆LT; TD类=tdLeft＆GT;
＆LT;输入名称=$ ctl00 $ ContentPlaceHolder1 TextBoxPasswordMAXLENGTH =50
ID =TextBoxPasswordNAME =密码TYPE =密码/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD类=tdRight＆GT;＆LT;跨度ID =ctl00_ContentPlaceHolder1_LabelConfirmPassword＆GT;确认密码：LT; / SPAN＆GT; ＆LT; / TD＆GT;
＆LT; TD类=tdLeft＆GT;
＆LT;输入名称=$ ctl00 $ ContentPlaceHolder1 TextBoxConfirmPasswordMAXLENGTH =50
ID =TextBoxConfirmPasswordNAME =confirm_passwordTYPE =密码/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD类=tdRight＆GT;＆下;跨度的id =ctl00_ContentPlaceHolder1_LabelContactMethod＆GT;联系的preferred方法：其中; /跨度＆GT; ＆LT; / TD＆GT;
＆LT; TD类=tdLeft＆GT;
＆LT;选择名称=$ ctl00 $ ContentPlaceHolder1 DropDownListContactMethodID =DropDownListContactMethod＆GT;
＆LT;期权价值=0＆GT;电子邮件和LT; /选项＆GT;
＆LT;期权价值=1＆GT;通过手机短信和LT通知; /选项＆GT;
＆LT;期权价值=2＆GT;既有＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD列跨度=2＆GT;
＆LT;输入类型=提交名称=$ ctl00 $ ContentPlaceHolder1 ButtonRegisterVALUE =注册
ID =ctl00_ContentPlaceHolder1_ButtonRegister级=注册级=提交
类型=提交/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;
＆LT; /表及GT;
解决方案
我想我解决了它 - 你必须创建密码文本框自定义规则...出于某种原因，ASP密码文本框的呈现并不太多工作好：
＆LT;％= TextBoxPassword.UniqueID％计算值：{
要求：真实，
MINLENGTH个：5 }， ＆所述;％= TextBoxConfirmPassword.UniqueID％计算值：{
要求：真实，
MINLENGTH个：5，
equalTo：#TextBoxPassword
}，
表单验证现在工作，除了Visual Studio的呻吟 - 它突出了：红说：
预期标识符，字符串或数字
请问这是什么问题？
Good Day
I am using an ASP.NET page with a master page. I want to do live form validation on the input fields (). Now all the tuts and demos/plugins I have seen are using normal html labels. I tried to implement some of them on my form, but they are not working. (I am using a mater page and a normal aspx web form...)
UPDATE: Issue replacing input tags with asp controls for the password fields...
The original input elements
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" type="text" />
</p>
<p>
<label for="lastname">Lastname</label>
<input id="lastname" name="lastname" type="text" />
</p>
<p>
<label for="username">Username</label>
<input id="username" name="username" type="text" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">Confirm password</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" />
</p>
<p>
<label for="agree">Please agree to our policy</label>
<input type="checkbox" class="checkbox" id="agree" name="agree" />
</p>
<p>
<label for="newsletter">I'd like to receive the newsletter</label>
<input type="checkbox" class="checkbox" id="newsletter" name="newsletter" />
</p>
<tr>
<td class="tdRight"><asp:Label ID="LabelEmail" runat="server" Text="Email Address (to be used as username):"></asp:Label></td>
<td class="tdLeft"><asp:TextBox name="email" type="email" ID="TextBoxEmail" runat="server" ClientIDMode="Static" TextMode="SingleLine" MaxLength="50"></asp:TextBox></td>
</tr>
<tr>
<td class="tdRight"><asp:Label ID="Label1" runat="server" Text="Postal Address:"></asp:Label></td>
<td class="tdLeft"><asp:TextBox ID="TextBoxPostal" runat="server" ClientIDMode="Static" TextMode="MultiLine" Rows="4" MaxLength="250"></asp:TextBox></td>
</tr>
<tr>
<td class="tdRight"><asp:Label ID="LabelPassword" runat="server" Text="Password:"></asp:Label></td>
<td class="tdLeft"><asp:TextBox name="password" type="password" ID="TextBoxPassword" runat="server" ClientIDMode="Static" TextMode="Password" MaxLength="50"></asp:TextBox></td>
</tr>
<tr>
<td class="tdRight"><asp:Label ID="LabelConfirmPassword" runat="server" Text="Confirm Password:"></asp:Label></td>
<td class="tdLeft"><asp:TextBox name="confirm_password" type="password" ID="TextBoxConfirmPassword" runat="server" ClientIDMode="Static" TextMode="Password" MaxLength="50"></asp:TextBox></td>
</tr>
</fieldset>
I want to replace the above with the following ASP controls
<tr>
<td class="tdRight"><asp:Label ID="LabelEmail" runat="server" Text="Email Address (to be used as username):"></asp:Label></td>
<td class="tdLeft"><asp:TextBox name="email" type="email" ID="TextBoxEmail" runat="server" ClientIDMode="Static" TextMode="SingleLine" MaxLength="50"></asp:TextBox></td>
</tr>
<tr>
<td class="tdRight"><asp:Label ID="Label1" runat="server" Text="Postal Address:"></asp:Label></td>
<td class="tdLeft"><asp:TextBox ID="TextBoxPostal" runat="server" ClientIDMode="Static" TextMode="MultiLine" Rows="4" MaxLength="250"></asp:TextBox></td>
</tr>
<tr>
<td class="tdRight"><asp:Label ID="LabelPassword" runat="server" Text="Password:"></asp:Label></td>
<td class="tdLeft"><asp:TextBox name="password" type="password" ID="TextBoxPassword" runat="server" ClientIDMode="Static" TextMode="Password" MaxLength="50"></asp:TextBox></td>
</tr>
<tr>
<td class="tdRight"><asp:Label ID="LabelConfirmPassword" runat="server" Text="Confirm Password:"></asp:Label></td>
<td class="tdLeft"><asp:TextBox name="confirm_password" type="password" ID="TextBoxConfirmPassword" runat="server" ClientIDMode="Static" TextMode="Password" MaxLength="50"></asp:TextBox></td>
</tr>
Now everything works, except for the password fiels? Why? Also, ID's do not matter, as the the validator work on the name and type fields...
jQuery:
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function () { alert("submitted!"); }
});
$().ready(function () {
// validate signup form on keyup and submit
$("form").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
}
});
// propose username by combining first- and lastname
$("#username").focus(function () {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if (firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}
});
//code to hide topic selection, disable for demo
var newsletter = $("#newsletter");
// newsletter topics are optional, hide at first
var inital = newsletter.is(":checked");
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
var topicInputs = topics.find("input").attr("disabled", !inital);
// show when newsletter is checked
newsletter.click(function () {
topics[this.checked ? "removeClass" : "addClass"]("gray");
topicInputs.attr("disabled", !this.checked);
});
});
</script>
The REAL RENDERED HTML (pertaining the form)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
type="text/javascript"></script>
<script src="Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() {
alert("submitted!");
}
});
$().ready(function() {
// validate signup form on keyup and submit
$("form").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
}
});
// propose username by combining first- and lastname
$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if (firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}
});
//code to hide topic selection, disable for demo
var newsletter = $("#newsletter");
// newsletter topics are optional, hide at first
var inital = newsletter.is(":checked");
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
var topicInputs = topics.find("input").attr("disabled", !inital);
// show when newsletter is checked
newsletter.click(function() {
topics[this.checked ? "removeClass" : "addClass"]("gray");
topicInputs.attr("disabled", !this.checked);
});
});
</script>
<form method="get" action="SignupPersonal.aspx" id="aspnetForm"
class="cmxform">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTIwMjk5MTc4MzEPZBYCZg9kFgICBQ9kFgICAQ9kFgICMA8QDxYGHg1EYXRhVGV4dEZpZWxkBQ9FbnVtRGVzY3JpcHRpb24eDkRhdGFWYWx1ZUZpZWxkBQlFbnVtVmFsdWUeC18hRGF0YUJvdW5kZ2QQFQMFRW1haWwlTm90aWZpY2F0aW9uIHZpYSBNb2JpbGUgVGV4dCBNZXNzYWdlcwRCb3RoFQMBMAExATIUKwMDZ2dnZGRksmDjLifKF4+hMs8AhfX/bwcgvt2QqQRuZWngXcH7AGM="
/>
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdABBfr2cGXQNKgk5u/suiS/eBMBPtPHD3IbRvk+yxeYb2457gKW6aCQ3yNBTG9LyKZ4cubOXF5tOYlsiIBcyrDbyQ4wKHhHIVKN2DCQeFUhf9fWAUCuZOob8WzLZCHNXad+6lH/vCaPfCLoThuEr+9Jzl6wAt6cuJ+L+27/Nrmm6upAz//swWW9Bijj8L66VLU8Xqa57A90pLu4vVlIQKRMNCPMnVTRV7QuT7xghzXApY9g0EIzfFocd5Qmeb8RCzKLnYNu/sHr3w5Hv9l1IOx6mNGOqE5LWQWcaFAwIxNHVtD2pkSrWzz9gkUQepnHOZG7M83cV/FFqhRADq7X7PITxLg4JwtYX8Yw9N8ZivtSz9f1K3117QXOtSn4MTHtKkNBE="
/>
</div>
<div id="signupPersonal">
<table>
<tr>
<td class="tdRight"><span id="ctl00_ContentPlaceHolder1_LabelName">Name:</span>
</td>
<td class="tdLeft">
<input name="ctl00$ContentPlaceHolder1$TextBoxName" type="text" maxlength="50"
id="TextBoxName" name="firstname" />
</td>
</tr>
<tr>
<td class="tdRight"><span id="ctl00_ContentPlaceHolder1_LabelSurname">Surname:</span>
</td>
<td class="tdLeft">
<input name="ctl00$ContentPlaceHolder1$TextBoxSurname" type="text" maxlength="50"
id="TextBoxSurname" class="required" />
</td>
</tr>
<tr>
<td class="tdRight"><span id="ctl00_ContentPlaceHolder1_LabelPin">Preferred Pin:</span>
</td>
<td class="tdLeft">
<input name="ctl00$ContentPlaceHolder1$TextBoxPin" type="password" maxlength="10"
id="TextBoxPin" class="required" />
</td>
</tr>
<tr>
<td class="tdRight"><span id="ctl00_ContentPlaceHolder1_LabelConfirmPin">Confirm Pin:</span>
</td>
<td class="tdLeft">
<input name="ctl00$ContentPlaceHolder1$TextBoxConfirmPin" type="password"
maxlength="10" id="TextBoxConfirmPin" class="required" />
</td>
</tr>
<tr>
<td class="tdRight"><span id="ctl00_ContentPlaceHolder1_LabelPhoneNo">Home Number:</span>
</td>
<td class="tdLeft">
<input name="ctl00$ContentPlaceHolder1$TextBoxPhoneNo" type="text" maxlength="20"
id="TextBoxPhoneNo" class="required digits" />
</td>
</tr>
<tr>
<td class="tdRight"><span id="ctl00_ContentPlaceHolder1_LabelMobileNo">Cell Number:</span>
</td>
<td class="tdLeft">
<input name="ctl00$ContentPlaceHolder1$TextBoxMobileNo" type="text" maxlength="20"
id="TextBoxMobileNo" class="required digits" />
</td>
</tr>
<tr>
<td class="tdRight"><span id="ctl00_ContentPlaceHolder1_LabelIDNumber">ID Number:</span>
</td>
<td class="tdLeft">
<input name="ctl00$ContentPlaceHolder1$TextBoxIDNumber" type="text" maxlength="20"
id="TextBoxIDNumber" class="required digits" />
</td>
</tr>
<tr>
<td class="tdRight"><span id="ctl00_ContentPlaceHolder1_LabelEmail">Email Address (to be used as username):</span>
</td>
<td class="tdLeft">
<input name="ctl00$ContentPlaceHolder1$TextBoxEmail" maxlength="50" id="TextBoxEmail"
name="email" type="email" />
</td>
</tr>
<tr>
<td class="tdRight"><span id="ctl00_ContentPlaceHolder1_Label1">Postal Address:</span>
</td>
<td class="tdLeft">
<textarea name="ctl00$ContentPlaceHolder1$TextBoxPostal" rows="4" cols="20"
id="TextBoxPostal"></textarea>
</td>
</tr>
<tr>
<td class="tdRight"><span id="ctl00_ContentPlaceHolder1_LabelPassword">Password:</span>
</td>
<td class="tdLeft">
<input name="ctl00$ContentPlaceHolder1$TextBoxPassword" maxlength="50"
id="TextBoxPassword" name="password" type="password" />
</td>
</tr>
<tr>
<td class="tdRight"><span id="ctl00_ContentPlaceHolder1_LabelConfirmPassword">Confirm Password:</span>
</td>
<td class="tdLeft">
<input name="ctl00$ContentPlaceHolder1$TextBoxConfirmPassword" maxlength="50"
id="TextBoxConfirmPassword" name="confirm_password" type="password" />
</td>
</tr>
<tr>
<td class="tdRight"><span id="ctl00_ContentPlaceHolder1_LabelContactMethod">Preferred method of contact:</span>
</td>
<td class="tdLeft">
<select name="ctl00$ContentPlaceHolder1$DropDownListContactMethod" id="DropDownListContactMethod">
<option value="0">Email</option>
<option value="1">Notification via Mobile Text Messages</option>
<option value="2">Both</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="ctl00$ContentPlaceHolder1$ButtonRegister" value="Register"
id="ctl00_ContentPlaceHolder1_ButtonRegister" class="register" class="submit"
type="submit" />
</td>
</tr>
</table>
</div>
</form>
解决方案
I think I solved it - You have to create custom rules for the password textboxes...for some reason the rendering of the asp password textboxes does not work too well:
<%= TextBoxPassword.UniqueID %>: {
required: true,
minlength: 5
},
<%= TextBoxConfirmPassword.UniqueID %>: {
required: true,
minlength: 5,
equalTo: "#TextBoxPassword"
},
The form validation now works, except for Visual Studio moaning - It highlights the : in red and says:
"Expected Identifier, String or Number"
Would that be a problem?
这篇关于在ASP.NET控件使用Ajax / jQuery的表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
