SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    Shropshire
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery Validate before Ajax Submits

    I am using jQuery and Ajax for some areas of a site and I cannot for the life of me work out how to only submit the Ajax if the form is valid. For normal jQuery validation I am using jquery.validate.min.js like this:
    Code:
    $("#po-login-form").validate();

    This works fine.
    I then have ajax functionality in some areas as such:
    Code:
    $('#po-login-box .login-send').click(function (e) {
        e.preventDefault();
                $.ajax({
                    url: 'po-login.php',
                    data: $('#po-login-box form.do-login').serialize() + '&action=send',
                    type: 'POST',
                    success: function(html) {
                        if (html == 'success') {
                            $('#po-login-box #po-login').hide("fast");
                            $('#mask , .login-popup').delay(1500).fadeOut(300 , function() {
                                $('#mask').remove();
                            });
                            window.location.href = 'checkout-delivery.php';
                        } else {
                            $('#po-login-box .login-error').show("fast");
                        }
                    }
                });
    
        });

    Again it works fine.Now my problem - I can't work out how to combine the 2 to ensure the form is valid before it submits (at the moment the ajax is firing regardless of what I do. I have tried using an if statement around the ajax and beforeSubmit within the ajax but neither works.
    Code:
    if($("#po-login-form").validate({
    Code:
        $.ajax({
            // ajax here
        })
    }); // This gives me an error in the console
    $.ajax({
        beforeSubmit: $("#po-login-form").validate(),
        // All other ajax here
    
    }); //This just submits the form without validating

    There must be a way to do this and must be a fairly normal requirement but I can't seem to work it out or find anything online to help.

  2. #2
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    Shropshire
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's OK, all sorted - I just run the two separately using the normal form validation and then my ajax and that works

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by chilli11 View Post
    It's OK, all sorted - I just run the two separately using the normal form validation and then my ajax and that works
    Okay, I was going to say that the validate documentation shows in its options one called submitHandler, for which the documentation says:

    The right place to submit a form via Ajax after it validated.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •