JQuery Passowrd Validation
I am using jQuery validation with my asp.net controls. Everything is working great except for password matching. Even though I put in matching passwords it says they do not match.
Here is the code
Any help or suggestions would be appreciated.
Here is the code
- <script type="text/javascript">
$(document).ready(function () {
var validator = $("#MainForm").validate({
rules: {
<%= username.UniqueID %>: {
required: true,
minlength: 6
},
<%= tbPassword.UniqueID %>: {
required: true,
minlength: 6
},
<%= tbConfirmPassword.UniqueID %>: {
required: true,
equalTo: "#tbPassword"
}
},
messages: {
<%= username.UniqueID %>: {
required: "Please enter a username.",
minlength: "Username must be at least six characters"
},
<%= tbPassword.UniqueID %>: {
required: "Required",
minlength: "Password must be at least 6 characters"
},
<%= tbConfirmPassword.UniqueID %>: {
required: "Required",
equalTo: "Password do not match."
}
},
// the errorPlacement has to take the table layout into account
errorPlacement: function (error, element) {
error.appendTo(element.next());
},
// set this class to error-labels to indicate valid fields
success: function (label) {
// set as text for IE
label.html(" ").addClass("checked");
},
highlight: function (element, errorClass) {
$(element).addClass(errorClass);
$(element.form).find("label[for=" + element.id + "]")
.removeClass("checked");
$(element.form).find("label[for=" + element.id + "]")
.addClass(errorClass);
}
});
});
</script>
- <div class="Column12" id="Form_Registration">
<h2 class="h2row">Create an Account</h2>
<h3 class="h3row">Create Login <div style="text-align: right; float: right;"><img src="../Images/icon_required.gif" / alt="*"> All Fields Are Required Unless Stated Otherwise</div></h3>
<ul>
<li>
<label>Username:</label>
<asp:TextBox ID="username" runat="server" height="16px" size="30" width="233px"></asp:TextBox>
<asp:Label for="username" runat="server"></asp:Label>
</li>
<li>
<label for="Password">Password:</label>
<asp:TextBox ID="tbPassword" runat="server" height="16px" size="30" TextMode="Password" width="233px"></asp:TextBox>
<asp:Label for="tbPassword" runat="server"></asp:Label>
</li>
<li>
<label for="ConfirmPassword">Confirm Password:</label>
<asp:TextBox ID="tbConfirmPassword" runat="server" height="16px" size="30" TextMode="Password" width="233px"></asp:TextBox>
<asp:Label for="tbConfirmPassword" runat="server"></asp:Label>
</li>
<li>
<label for="Email">Email:</label>
<asp:TextBox ID="tbEmail" runat="server" height="16px" size="30" width="233px"></asp:TextBox>
</li>
<li>
<label for="ConfirmEmail">
Confirm Email:</label>
<asp:TextBox ID="tbConfirmEmail" runat="server" height="16px" size="30"
width="233px"></asp:TextBox>
</li>
</ul>
<h3 class="h3row">
Addictional Information
<div style="text-align: right; float: right;">
<img /="" alt="*" src="../Images/icon_required.gif"> All Fields Are Required
Unless Stated Otherwise</img></div>
</h3>
<ul>
<li>
<label for="FirstName">
First Name:</label>
<asp:TextBox ID="tbFirstName" runat="server" height="16px" size="30"
width="233px"></asp:TextBox>
</li>
<li>
<label for="LastName">
Last Name:</label>
<asp:TextBox ID="tbLastName" runat="server" height="16px" size="30"
width="233px"></asp:TextBox>
</li>
<li>
<label for="Address1">
Street Address:</label>
<asp:TextBox ID="tbAddress1" runat="server" height="16px" size="30"
width="233px"></asp:TextBox>
</li>
<li>
<label for="Address2">
Street Address 2:</label>
<asp:TextBox ID="tbAddress2" runat="server" height="16px" size="30"
width="233px" ></asp:TextBox> (Optional)
</li>
<li>
<label for="Country">
Country:</label>
<asp:DropDownList ID="ddlCountryList" runat="server" AutoPostBack="True"
DataSourceID="CountryListDataSource" DataTextField="English"
DataValueField="id" Height="22px" OnDataBound="ddlCountryList_DataBound"
onselectedindexchanged="ddlCountryList_SelectedIndexChanged" Width="240px">
</asp:DropDownList>
<asp:SqlDataSource ID="CountryListDataSource" runat="server"
ConnectionString="<%$ ConnectionStrings:AquariumBidsConnectionString %>"
SelectCommand="SELECT [id], [English] FROM [CountryList]">
</asp:SqlDataSource>
</li>
<li>
<label for="City">
City:</label>
<asp:TextBox ID="tbCity" runat="server" height="16px" size="30" width="233px"></asp:TextBox>
</li>
<li>
<label for="State">
State:</label>
<asp:TextBox ID="tbState" runat="server" height="16px" size="30"
Visible="False" width="233px"></asp:TextBox>
<asp:DropDownList ID="ddlStateList" runat="server"
DataSourceID="StateListDataSource" DataTextField="State" DataValueField="id"
Height="22px" Width="240px">
</asp:DropDownList>
<asp:SqlDataSource ID="StateListDataSource" runat="server"
ConnectionString="<%$ ConnectionStrings:AquariumBidsConnectionString %>"
SelectCommand="SELECT [id], [State] FROM [StateList]"></asp:SqlDataSource>
</li>
<li>
<label for="Postal">
Zip / Postal:</label>
<asp:TextBox ID="tbPostal" runat="server" height="16px" size="30" width="233px"></asp:TextBox>
</li>
</ul>
<h3 class="h3row">
Agreements
<div style="text-align: right; float: right;">
<img /="" alt="*" src="../Images/icon_required.gif"> All Fields Are Required
Unless Stated Otherwise</img></div>
</h3>
<ul>
<li>
<asp:CheckBox ID="cbTerms" runat="server" Checked="false"
Text="I agree to the Terms & Conditions" TextAlign="Left" />
</li>
<li>
<asp:CheckBox ID="cbNewsletter" runat="server" Checked="false"
Text="Receive Newsletter" TextAlign="Left" />
</li>
</ul>
<br />
<br />
<asp:Button ID="Button1" runat="server"
Text="Complete Registration" onclick="Button1_Click"/>
</div>
Any help or suggestions would be appreciated.
Topic Participants
brown71576