CODEWITHSUNDEEP
javascriptjqueryajaxformsvalidation
RB Studios
RB Studios

Reputation: 35

How to use jQuery validator and AJAX request at the same time?

I'm using jQuery Validation Plugin.

I'm trying to submit my login page using AJAX but at the same time I'm also trying to validate the form using jQuery Validate; However when I submit it I only validates the last field after the AJAX request has been submitted; therefore no validation is taking place.

I'm trying to get the form's submit button to be disabled until validation has passed. Then allow the AJAX request to take place once validated it will undisable the button; allowing the user to submit the form using enter or clicking the button. However it doesn't seem to be working.

$(document).ready(function() {
    $("#signin").validate({
        rules: {
            username: {
                required: true
            },
            password: {
                required: true,
                minlength: 8,
                maxlength: 50
            }
        },
        messages: {
            username: {
                required: "Your username is required."
            },
            password: {
                required: "Your password is required.",
                minlength: "Passwords are between 8-50 characters.",
                maxlength: "Passwords are between 8-50 characters."
            }
        }
    });
    $("form .login").click(function () {
        $.ajax(/* ... */);

        return false;
    });
});

Upvotes: 1

Views: 348

Answers (1)

Michał Perłakowski
Michał Perłakowski

Reputation: 92521

Instead of using click event listener on submit button, use submit event on form. Also you need to check if the form is valid using .valid() method on it:

$("form").submit(function() {
  if (!$("form").valid()) return;

  var username = $("form #username").val();
  var password = $("form #password").val();
  // ...
});

Upvotes: 1

Related Questions