ASP.NET Validate membership email from ClientSideEvents and WebMethod - asp.net

Question

I have ASPxGridview and i want to check if email already registered before or not in editform using ClientSideEvents.
Any help to resolve this problem ?
aspx section
this is the javascript section
function OnEmailValidation(s, e) {
var error = "";
var tfld = trim(e.value);
var illegalChars = /^\w+([-+.'''']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (!illegalChars.test(tfld)) {
$get("spanEmail").innerHTML = "invalid email";
} else {
PageMethods.CheckEmail(e.value.toString(), OnCheckEmail);
// how to check OnCheckEmail before continue
//if(email already registered) {
// return false
//}
$get("spanEmail").innerHTML = "";
}
return true;
}
function OnCheckEmail(unavailable) {
if (unavailable == true) {
$get("spanEmail").innerHTML = "already registered";
$get("spanEmail").style.color = "red";
}
else if (unavailable != true) {
$get("spanEmail").innerHTML = "Available";
$get("spanEmail").style.color = "#76EB69";
}
}
aspx.cs
col_Email.PropertiesTextEdit.ClientSideEvents.Validation = "OnEmailValidation";
grid.Columns.Add(col_Email);
[WebMethod]
public static bool CheckEmail(string email)
{
System.Threading.Thread.Sleep(200);
if (Membership.FindUsersByEmail(email) != null)
{
if (Membership.FindUsersByEmail(email).Count <= 0)
{
return false;
}
return true;
}
else
{
return false;
}
}
This is my final code after the
Filip
advice but i have mini problem:
When i use
(async: false) and cntr.SetIsValid(false);
the control doesn't apply the action
but If i use
(async: true) and cntr.SetIsValid(false);
the control apply the action
Why ?
I want to use async: false
function OnEmailValidation(s, e) {
var illegalChars = /^\w+([-+.'''']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var spanEmail = document.getElementById("spanEmail");
var obj = GetObj('txt_Email');
var cntr = aspxGetControlCollection().Get(obj.id);
if (!illegalChars.test(e.value)) {
spanEmail.innerHTML = "Invalid Email";
spanEmail.style.color = "red";
cntr.SetIsValid(false);
} else {
$.ajax({
type: "POST",
async: false,
url: "myweb_service.asmx/CheckEmail",
data: "{'email':'" + e.value.toString() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(res) {
if (res.d == "true") {
spanEmail.innerHTML = "Email register before";
spanEmail.style.color = "red";
cntr.SetIsValid(false);
}
if (res.d == "false") {
spanEmail.innerHTML = "Available";
spanEmail.style.color = "#76EB69";
cntr.SetIsValid(true);
}
}
});
}}

Answer 1

You can use jQuery to call PageMethods (replace PageMethods.CheckEmail call with this code):
$.ajax({
type: "POST",
async: false,
url: "<PageName>.aspx/CheckEmail",
data: "{" + e.value.toString() + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(res) {
if (res.d)
return false;
}
});
Replace PageName with your page name.
Be careful with synchronous (async: false) ajax calls. They will block your page until request finishes.
If res.d doesn't return result or you just want detailed explanation of posted code check these links:
Using jQuery to directly call aspnet ajax page methods
A breaking change between versions of aspnet ajax

Answer 2

You will need to set up a web service on the server side that will check if the email already exists. Then you will use JavaScript AJAX (preferably a library like jQuery or Prototype) to query the web service during your validation method.
it will be a good deal of work to get it all set up. Good luck. See one of these links for more information:
http://msdn.microsoft.com/en-us/library/bb532367.aspx
http://msdn.microsoft.com/en-us/library/t745kdsh.aspx