locked
How to use remote method to check username and password validation? RRS feed

  • 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."
                }
            })

    Friday, July 31, 2015 4:40 AM

Answers

  • 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.

    • Marked as answer by Ankush Bindra Saturday, August 1, 2015 1:03 PM
    Saturday, August 1, 2015 1:02 PM

All replies

  • 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.

    • Marked as answer by Ankush Bindra Saturday, August 1, 2015 1:03 PM
    Saturday, August 1, 2015 1:02 PM
  • Thanks for sharing your experience here.

    By the way, please post in ASP.NET forums here if you got any other web development questions:

    http://forums.asp.net/


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, August 3, 2015 9:05 AM
    Moderator