jQuery mobile custom validation in mvc3

Question

For form validation to check email existence I need custom validation I tried money but didn't work it always return email already exist I pasting code please confirm me error

jQuery code in view

<script type="text/javascript">
        $(document).ready(function () {

             var response;
             //<!-- add vlidator -->
             $.validator.addMethod(
             "unique_email",function(value,element){
                $.ajax({
                url:'SignUp/emailExist',
                type: 'POST',
                data: 'email='+value,
                contentType: 'application/json; charset=utf-8',
                success:function(msg){
                    response = ( msg == 'true' ) ? true : false;
                }              
                })
                return response;
             },"email already exist"
             );
            jQuery.validator.classRuleSettings.unique_email = { unique_email: true };
            $("#register-form").validate({

                submitHandler: function (form) {
                    $('#register-form').submit();
                }
            });


        });
    </script>

jQuery mobile code

<div data-role="fieldcontain">
                <label for="email">
                <em>* </em> Email: </label>
               <label> <input type="text" id="email" 
                    name="email" class="required email unique_email" /></label>                  
            </div>

and finally code in action which is used via ajax

[HttpPost]
        public ActionResult emailExist(string email)
        {
            //here i m checking from db that email exist or not result will return 1 
            //if an email exist and 0 if not so i m return false if i found email that is on 1
            int value = su.isEmailExist(email);
            if (value == 1)
                return Json(new { success = false});
            else
                return Json(new { success = true});
        }

Thanks in advance

Answer 1

As your ajax request is asynchronous your validator will always a response of undefined (or false) as the function is returned before the ajax request finishes.

You will need to make your request synchronous to set response before the function returns. You can do this by adding an 'async: false' parameter to your ajax request

async: false

EDIT:

There are also other issues with your code. You need to add a data type to tell JSON you are expecting a JSON response. Also, your msg variable in the success response was expecting a string but this was incorrect as the first property of your JSON object is success:. As you are using $.ajax with dataType 'json' you now need to pass the data as a JSON string. I have tested the following javascript code and it seems to work:

    $(document).ready(function () {

         var response;
         //<!-- add vlidator -->
         $.validator.addMethod(
             "unique_email",function(value,element){
                $.ajax({
                url:'SignUp/emailExist',
                type: 'POST',
                data: "{ email: '" + value + "' }",
                contentType: 'application/json; charset=utf-8',
                success:function(json){
                    response = json.success;
                },
                async: false,
                dataType: 'json'          
                });
                return response;
             },"email already exist"
         );
        jQuery.validator.classRuleSettings.unique_email = { unique_email: true };
        $("#register-form").validate({

            submitHandler: function (form) {
                form.submit();
            }
        });


    });