jQuery Username Available with asp.net controls
I am wanting to add username availability checks in with my other validation. Here is my code:
- $(document).ready(function () {
var validator = $("#MainForm").validate({
rules: {
<%= username.UniqueID %>: {
required: true,
minlength: 6,
usernameCheck: true;
},
<%= tbPassword.UniqueID %>: {
required: true,
minlength: 6
},
<%= tbConfirmPassword.UniqueID %>: {
required: true,
minlength: 6,
equalTo: "#<%=tbPassword.ClientID %>"
}
},
messages: {
<%= username.UniqueID %>: {
required: "Please enter a username.",
minlength: "Username must be at least six characters"
},
<%= tbPassword.UniqueID %>: {
required: "Please enter a password.",
minlength: "Password must be at least 8 characters"
},
<%= tbConfirmPassword.UniqueID %>: {
required: "Please enter a password.",
equalTo: "Password does not match the one above."
}
},
// 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);
}
});
});
css:
- label.error {
background:url("/images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
color: #EA5200;
}
label.checked {
background:url("/images/checked.gif") no-repeat 0px 0px;
}
markup:
- <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" ID="Test"></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 id="lblPassword" 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>
How can I add username availability to this? I have tried many things but can't get it working.