JQuery Validator Plugin Asp.Net call server method
-
22-07-2019 - |
Question
I use the JQuery Validation plugin to validate a form (http://docs.jquery.com/Plugins/Validation/)
For example, I can validate an email in a form.
What I would like to do is to validate if the username chosen already exists. So, I need to call a server method that query the database. How can I do that ?
UPDATE
From balexandre answer, I try the following :
$.validator.addMethod("userName",
function(value, element)
{
$.get
(
"CheckUser.aspx?User=" + value,
function(data)
{
if (data == "True")
{
return false;
}
else if (data == "False")
{
return true;
}
else
{
alert(data);
}
}
);
},
"User already exists");
$(document).ready
(
function()
{
$("#aspnetForm").validate
(
{
rules:
{
<%=txtUserName.UniqueID %>:
{
required: true,
email: true,
userName: true
}
}
}
);
}
);
In the Response, I write a boolean (True of False) instead of 1 ou 0.
I know that my validation function is call. The problem is that it's always show the error message even if the user doesn't exists. I try to put an alert message before the return true to see if it's reach, and it is. So I don't get, why it's doesn't work...
Solution
quite easy and it's a nice thcnique that I apply a lot over my projects
1 - create an aspx page called verifyUserAvailability.aspx with code-behind file
2 - delete all lines except the first in the aspx file
3 - in the code-behind file inside the Page_Load event call your database like
protected void Page_Load(object sender, EventArgs e) {
string username = Request["usr"];
int r = 0;
if(!String.IsNullOrEmpty(username))
if( yourDAL.getUserAvailability(username) )
// your method would send true if user is available to be used
r = 1;
Response.Clear();
Response.Write(r);
Response.Flush();
}
4 - now in your form page, create a button like
<input id="btnCheckAvailability" type="button"
value="Check availability"
onclick="javascript:checkAvailability();" />
5 - create the checkAvailability() method
<script type="text/language">
function checkAvailability() {
var $user = $("#UsernameInputBox");
$.get("verifyUserAvailability.aspx?usr=" + $user.val(), function(data) {
// this will call the page passing the username and return 1 or 0
if( data == "1" )
$user.css("background-color", "green");
else
$user.css("background-color", "red");
});
}
</script>
OTHER TIPS
This should do the trick...
http://riderdesign.com/articles/Check-username-availability-with-JQuery-and-ASP.NET.aspx
OR...
One answer shows how to call a service & the second shows how to call a page method.