Error message displaying every time. Using Jquery validator in MVC Project

Question

My Html Code as well as Javascript code is follows.

<h2>Register</h2>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    <fieldset class="acloginform">
        <legend>Register User</legend>

        <ol>
            <li>
                <div class="editor-label">
                    @Html.LabelFor(model => model.Email_Id)
                </div>
                <div class="editor-field">
                    @Html.TextBoxFor(model => model.Email_Id, new { @id = "txt_EmailId" })
                    @Html.ValidationMessageFor(model => model.Email_Id)
                </div>
            </li>
            <li>
                <div class="editor-label">
                    @Html.LabelFor(model => model.FirstName)
                </div>
                <div class="editor-field">
                    @Html.TextBoxFor(model => model.FirstName)
                    @Html.ValidationMessageFor(model => model.FirstName)
                </div>
            </li>
            <li>
                <div class="editor-label">
                    @Html.LabelFor(model => model.LastName)
                </div>
                <div class="editor-field">
                    @Html.TextBoxFor(model => model.LastName)
                    @Html.ValidationMessageFor(model => model.LastName)
                </div>
            </li>
            <li>
                <div class="editor-label">
                    @Html.LabelFor(model => model.Password)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Password)
                    @Html.ValidationMessageFor(model => model.Password)
                </div>
            </li>
            <li>
                <div class="editor-label">
                    @Html.LabelFor(model => model.ConfirmPassword)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.ConfirmPassword)
                    @Html.ValidationMessageFor(model => model.ConfirmPassword)
                </div>
            </li>
            <li>
                <input type="submit" value="Register" />
                @Html.ActionLink("Back to Home Page", "Index", new { Controller = "Home" }, new { @class = "regislnk" })
            </li>
        </ol>
    </fieldset>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script type="text/javascript">  

    $(document).ready(function () {        

        jQuery.validator.addMethod("Duplicate_EmailId", function (value) {
            $.ajax({
                url: '/User/CheckEmailId?EmailId=' + value,
                async: false,
                success: function (data) {
                    alert(data);
                    if (data == true)
                        return false;
                    else
                        return true;
                },
            });          


        }, "Email Id already Exists");

        $('#txt_EmailId').addClass('Duplicate_EmailId');    
    });

</script>

my c# method under usercontroller is

public JsonResult CheckEmailId(string EmailId)
{
    var res = my method;
    return Json(res, JsonRequestBehavior.AllowGet);
}

Here error message is displaying on every result success/failure. and the method is calling

two times. on blur of textbox as well as form submit.

your doing this alert(data) first then again you are checking data== true or not and returning false??? and i think it requires === if you want to compare with true. — NetStarter, Apr 08 '13 at 13:37
to observe the result i put alert(data). you can ignore it. and if i replaced == with === is also not working for me — Kartheek, Apr 08 '13 at 13:42
i tried posting your code to http://www.jsFiddle.net but i am not able to run your code because of your HTML elements it says extra comma after return true line at 14 — NetStarter, Apr 08 '13 at 13:48

score 0 · Answer 1 · answered Apr 09 '13 at 10:48

Your immediate problem is that you are not returning anything from your validation method, so that is like returning false

jQuery.validator.addMethod("Duplicate_EmailId", function (value) {

    // returning nothing here, means validation fails

}, "Email Id already Exists");

you are returning true/false from the ajax method but not from the validation method, you need something like this

jQuery.validator.addMethod("Duplicate_EmailId", function (value) {

    var validationResult = false;

    $.ajax({
        url: '/test/CheckEmailId?EmailId=' + value,
        async: false,
        success: function (data) {
            console.log(data);
            if (data == true)
                validationResult = false;
            else
                validationResult = true;
        },
    });

    return validationResult;

}, "Email Id already Exists");

but I would say that putting async to false like this is not ideal, as it will disable the user from filling in other fields while the ajax call is made. There is some clever stuff that has gone into the implementation of the remote method so it can be asyncronous. If you can use it, use the plugin's remote method.

Error message displaying every time. Using Jquery validator in MVC Project

1 Answers1