À l'aide d'ajax/jQuery de Validation de Formulaire sur ASP.NET les contrôles

Bonne Journée

Je suis en utilisant un ASP.NET page avec une page maître. Je veux faire vivre la validation d'un formulaire sur le champs de saisie (). Maintenant, tous les tutoriaux et les démos/plugins que j'ai vu sont à l'aide de html normal étiquettes. J'ai essayé de mettre en œuvre certains d'entre eux sur mon formulaire, mais ils ne sont pas de travail. (Je suis l'aide d'une mater de la page et de normal aspx formulaire web...)

Mise à JOUR: Question de remplacer les balises input avec l'asp contrôles pour les champs de mot de passe...

De l'entrée d'origine des éléments

  <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>

Je veux remplacer le ci-dessus avec le suivant ASP contrôles

        <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>

Maintenant, tout fonctionne, sauf pour le mot de passe champs? Pourquoi? Aussi, les ID n'a pas d'importance, tant que le validateur de travail sur le nom et le type des champs...

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>

Le RÉEL RENDU HTML (sur la forme)

<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>