How to use remote method to check username and password validation?

Question

We are working on MVC.net application where on click login button username and password need to validate on server side. We are using Form authentication over there. Page flow is like this…

JQuery validation plug-in used for client side validation, if client validation pass then make AJAX call to MVC controller to validate username and password. In controller action, we need to pass three parameters Username, Password and RemeberMe. If it is valid then it will return target URL as JSON result and from client side it will redirect to that controller. If it is not valid then show error message.

We write following code for client validation here ‘.login-form' for form where all these controls are available. I need to write remote method for this but no idea how to write that. Controller Action URL is “Login/ValidateUser” and in post send username, password and remeber . Can you please provide some code sample how to achieve this in remote method parameter in jQuery Validation plug-in

$('.login-form').validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        rules: {
            username: {
                required: true,
                username:true,
                "remote":
            {
                **//need to write AJAX call here..**
            }
            },
            password: {
                required: true
            },
            remember: {
                required: false
            }
        },
        messages: {
            username: {
                required: "Username is required.",remote: "Username and password is invalid"
            },
            password: {
                required: "Password is required."
            }
        },

Bit unclear what your trying to achieve. Why aren't you using the `[Remote]` attribute on your `UserName` property? Why are you using ajax to POST your form? — , Jul 31 '15 at 04:56
Actually I got this UI template from our UX (User exp) team where they create this form
with submit type button as login button. I also don't want to use this design as simple Ajax call from normal type button can resolve my problem. But on simple type button click above validation not occur. I think I should call these validation on simple input type button click. Then no need to call Form submit request. Is it works, or you can provide me some better solution. I want to use above validation as it contains many UI processes... — Ankush Bindra, Jul 31 '15 at 06:17

score 1 · Answer 1 · answered Jul 31 '15 at 06:19

  remote: {
    url: "controller/action",
    type: "post",
    data: {
      username: function() {
        return $( "#username" ).val();
      }
    }
  }

http://jqueryvalidation.org/remote-method see this doc

set the options,and it will do the ajax auto,you don't need write the ajax request youself

score -1 · Answer 2 · answered Aug 01 '15 at 12:59

I changed UI design to submit form. Instead of Submit button I use simple type="button" and call following code on that click....

LoginClick = function () {

    if ($('.login-form').valid()) {

        var userName = $('[name=username]').val();
        var password = $('[name=password]').val();
        var rememberMe = $('[name=remember]').val();

        //$('.alert-danger', $('.login-form')).show();

        $.ajax({
            url: "/account/validateuser",
            type: "POST",
            data: JSON.stringify({ UserName: userName, Password: password, IsRememberMe: rememberMe }),
            dataType: "json",
            contentType: "application/json",
            success: function (status) {
                //$("#message").html(status.Message);
                if (status.Success) {
                    window.location.href = status.TargetURL;
                }
            },
            error: function () {
                $("#message").html("Error while authenticating user credentials!");
            }
        });
    }
};

Here if all fields are valid then I call ajax call then redirect user to requested page.

How to use remote method to check username and password validation?

2 Answers2