Response title
This is preview!
How to configure Jquery Validation with ASP to check if a user exists
in Using jQuery Plugins
•
11 years ago
I am trying to use the JQUERY VALIDATOR like the one used in the Milk Sign Up form example. I am having problems with the REMOTE validation method. I want to check if a user exists and if it does to show a message like: user not available.
When I enter a username even if it exists in the database, I don't get any alert or message. I would like to know if the REMOTE validation method will show a message when a user is found just configuring this part: remote: "getuser.asp" in the jquery? I set my asp file to display a true or false message depending on wether a username exists or not.
This is the code I am using:
-
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="jquery.validate.min.js" type="text/javascript"></script><script id="demo" type="text/javascript">
$(document).ready(function() {
// validate signup form on keyup and submit
var validator = $("#signupform").validate({
rules: {
firstname: "required",
username: {
required: true,
minlength: 2,
remote: "getuser.asp"
},
password: {
required: true,
minlength: 5
},
password_confirmed: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
dateformat: "required",
terms: "required"
},
messages: {
firstname: "Enter your name.",
username: {
required: "Enter a username",
minlength: jQuery.format("Enter at least {0} characters"),
remote: jQuery.format("{0} it is already taken.")
},
password: {
required: "Provide a password",
rangelength: jQuery.format("Enter at least {0} characters")
},
password_confirm: {
required: "Repita su clave",
minlength: jQuery.format("Enter at least {0} characters"),
equalTo: "Enter the same password as above"
},
email: {
required: "Por favor entre un correo electrónico valido.",
minlength: "Please enter a valid email address",
remote: jQuery.format("{0} is already in use")
},
dateformat: "Choose your preferred dateformat",
terms: "Please accept the terms"
},
// specifying a submitHandler prevents the default submit, good for the demo
submitHandler: function() {
alert("submitted!");
},
// set this class to error-labels to indicate valid fields
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
}
});
// 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;
}
});});
</script>
This is the html form:
- <form id="signupform" autocomplete="off" method="get" action="<%=MM_editAction%>">
<table width="656" align="center">
<tr valign="baseline">
<td nowrap="nowrap" align="right">Nombre:</td>
<td>
<input type="text" id="cname" name="firstname" value="" size="32" class="required" minlength="3"/> <div id="result"> </div> </td>
<td> </td>
</tr>
<tr valign="baseline">
<td width="184" align="right" nowrap>Username:</td>
<td width="190"><input name="username" type="text" id="username" value="" size="32">
<div id="result"> </div> </td>
<td width="266"> </td>
</tr>
- <tr valign="baseline">
<td nowrap align="right">Correo Electrónico:</td>
<td><input name="email" type="text" id="email" value="" size="32" />
<div id="results2"> </div> </td>
<td> </td>
</tr>
<tr valign="baseline">
<td nowrap align="right">Clave:</td>
<td><input name="password" type="text" id="password" value="" size="20"> </td>
<td> </td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Confirmar Clave:</td>
<td><input name="password_confirmed" type="text" id="password_confirmed" value="" size="20" /> </td>
<td> </td>
</tr>
<tr>
<td class="label"><label>
<div align="right">Which Looks Right</div>
</label></td>
<td class="field" colspan="2" style="vertical-align: top; padding-top: 2px;"><table>
<tbody>
<tr>
<td style="padding-right: 5px;"><input id="dateformat_eu" name="dateformat" type="radio" value="0" />
<label id="ldateformat_eu" for="dateformat_eu">14/02/07</label> </td>
<td style="padding-left: 5px;"><input id="dateformat_am" name="dateformat" type="radio" value="1">
<label id="ldateformat_am" for="dateformat_am">02/14/07</label> </td>
<td></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td class="label"> </td>
<td class="field" colspan="2"><div id="termswrap">
<input id="terms" type="checkbox" name="terms" />
<label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
</div>
<!-- /termswrap --> </td>
</tr> -
<tr valign="baseline">
<td nowrap align="right"> </td>
<td><input id="signupsubmit" type="submit" value="Submit"> </td>
<td> </td>
</tr>
</table>
<input type="hidden" name="MM_insert" value="form1">
</form>
- I will appreciate any help about this matter.
1