Check email availability with asp.net ajax and make page invalid if exists

Question

I'm trying to performa an ajax validation for e-mail address. I need to know if user is already registered so I need to check it in my database. There is similar example: http://www.highoncoding.com/Articles/439_Performing_Instant_UserName_Availability_Check_Using_JQuery_Ajax_API.aspx

My current code is:

function validateEMail(email) {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "ajax/services.asmx/validateEMail",
        data: "{'email': '" + email + "'}",
        dataType: "json",
        success: function (result) {
            $("#<%=lEMail.ClientID %>").html(result.d.result);
        }
    });
}

and server function:

public class EMailValidateResult
{
    public bool valid { get; set; }
    public string result { get; set; }
}

[WebMethod]
public EMailValidateResult validateEMail(string email)
{
    EMailValidateResult result = new EMailValidateResult();

    result.valid = false;
    result.result = "<img src=\"icons/accept.png\" title=\"E-Mail is valid\" />";

    return result;
}

I need to deny user page postback if the e-mail already exists.

Answer 1

On client side set a global variable to allow or not the form submit base on the email user flag that you set on ajax call.

var eMailExist = false;

function AllowPostBack()
{
  if(eMailExist)
    alert("This email all ready exist");

  return !eMailExist;
}

On the form tag

onsubmit="return AllowPostBack();"

On you ajax call you return with jSon if exist

function validateEMail(email) {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "ajax/services.asmx/validateEMail",
        data: "{'email': '" + email + "'}",
        dataType: "json",
        success: function (result) {
            $("#<%=lEMail.ClientID %>").html(result.d.result);
            eMailExist = result.d.valid;
        }
    });
}

On the post back check it again for the case of javascript dissabled.

Answer 2

I think you need to set Page_IsValid to false in your success callback

Answer 3

By using customValidator:

<asp:CustomValidator ID="cvEMail" runat="server" ControlToValidate="tEMail"
Display="None" ClientValidationFunction="validateEMail"
OnServerValidate="cvEMail_ServerValidate"/>
<span id="lEMail" runat="server"></span>

Client side javascript:

<script type="text/javascript">
    function validateEMail(source, arguments) {
        var isValid;

        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "ajax/services.asmx/validateEMail",
            data: "{'email': '" + arguments.Value + "'}",
            dataType: "json",
            async: false,
            success: function (result) {
                $("#<%=lEMail.ClientID %>").html(result.d.result);
                isValid = result.d.valid;
            }
        });

        arguments.IsValid = isValid;
    }
</script>

Server side ajax function:

[WebMethod]
public EMailValidateResult validateEMail(string email)
{
    EMailValidateResult result = new EMailValidateResult();

    result.valid = false;
    result.result = "Invalid...";

    if (Regex.IsMatch(email,@"\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"))
    {
        result.valid = true;
        result.result = "Valid...";
    }
    else if(check if exists in database)
    { invalid, exists message... }

    return result;
}

Server side validation handler:

protected void cvEMail_ServerValidate(object source,ServerValidateEventArgs args)
{
    args.IsValid = false;
    lEMail.InnerHtml = "invalid...";

    if(Regex.IsMatch(args.Value,@"\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"))
    {
        args.IsValid = true;
        lEMail.InnerHtml = "valid...";
    }
    else if(check if exists in database)
    { invalid, exists message... }
}

Source: http://brian.dobberteen.com/code/jquery_ajax_custom_validator/