Question

A simple registration form has a field “Preferred login id (username)”. As soon as user enters email, I validate entered username (if it already exists or not) by comparing it with database values. For this I am doing server call using $.ajax method of jquery.

<script>
$('#txtPreferredLogin').focusout(function () {
            $.ajax({
                type: "POST",
                url: "../Login.aspx/CheckUserName",
                async: false,`enter code here`
                data: "{userName: '" + $('#txtPreferredLogin').val() + "' }",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    $('#valid').html("<img src='Images/waiting.gif' alt='Checking username!'>");
                    var delay = function () {
                        AjaxSucceeded(response);
                    };
                    setTimeout(delay, 500);
                },
                failure: function (response) {
                    alert(response.d);
                }
            });
        });

        function AjaxSucceeded(result) {
            if (result.d == true) {
                $('#valid').html("<img src='Images/2_Not.png' alt='Username taken!'>");
            }
            else {
                $('#valid').html("<img src='Images/1_available.png' alt='Username available!'>");
            }
        }

        $.validator.addMethod('notNone', function (value, element) {
            return (value != '0');
        });

        $(function () {
            $("#regi1").validate(
            {
                rules:
                {
                    ddlCity:
                      {
                          required: true,
                          notNone: true
                      },
                    txtDOB:
                      {
                          required: true,
                          dpDate: true
                      }
                },
                messages: {
                    ddlCity: "Please select city",
                    txtDOB: "Please enter a valid date (dd-mm-yyyy)"
                }
            });
        });

</script>

Server side code is

public bool getVal(string userName)
        {
            var query = from p in context.tblBasicDetails
                        where p.LoginId == userName.Trim()
                        select p;
            if (query.Any())
            {
                return true;
            }
            else
            {
                return false;
            }
        }

        [WebMethod]
        public static bool CheckUserName(string userName)
        {
            Login l = new Login();
            return (l.getVal(userName));
        }

Now when username is not available it shows message (image) that its unavailable. But I have Save button below these fields, on click of which whole form get validated i.e. it doesn’t postback page until all fields are valid except in case of username unavailability. Now I don’t want to do postback if username is unavailable. What changes i need to do in code ?

Answer 1

As Riaz said remote validation is very helpful but in your case you are already checking username so you dont want to visit server again.

jquery has .data function which you can use.

function AjaxSucceeded(result) {
    if (result.d == true) {
        $('#valid').html("<img src='Images/2_Not.png' alt='Username taken!'>");
        $("#txtPreferredLogin").data("available", false); //add data
    } else {
        $('#valid').html("<img src='Images/1_available.png ' alt='        Username available!'>");
        $("#txtPreferredLogin").data("available", true); //add data
    }
}

//add validator
$.validator.addMethod('
        available ', function(value, element) {
    return $(element).data("available");
});



$(function() {
    $("#regi1").validate({
        rules: {
            txtPreferredLogin: {
                required: true,
                available: true
            },
            ddlCity: {
                required: true,
                notNone: true
            },
            txtDOB: {
                required: true,
                dpDate: true
            }
        },
        messages: {
            ddlCity: "Please select city",
            txtDOB: "Please enter a valid date (dd-mm-yyyy)"
        }
    });
});