How can I send ajax call after validation is correct?

Question

I am trying to send data to my heroku database, i have user input from a html file and sending it through to my jquery file, my validation works but i wish to send my ajax call after this is valid, i.e. upon the submit button clicked. It doesn't seem to get to my ajax call( the ajax works).The success bit is my attempt to show success message (swal is sweetalert library & and not sure is success works). I believe my submit handler is at fault.

// * html code of form *

                <form action="" name="registration"><br>

                    <label for="email">Email</label><br>
                    <input type="email" name="email" id="email" placeholder="example@example.com" /><br><br>

                    <label for="password">Password</label><br>
                    <input type="password" name="password" id="password"
                        placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;" /><br><br>

                    <label for="repassword">Re-Type Password</label><br>
                    <input type="password" name="repassword" id="repassword"
                        placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;" /><br><br>

                    <input type="checkbox" name="agreeBox" id="agreeBox" />
                    <label for="agree-boxId">I agree
                        to all statements in <a href="../documents/terms_of_service" class="term-service">Terms of
                            Service</a></label><br><br>

                    <button type="submit" id="signUp">Register</button>

                    <div class="signup-image">
                        <figure><img src="images/signup-image.png" alt="sign up image"></figure>
                    </div>

                </form>

// ***** my content in Jquery file ******

$("form[name='registration']").validate({

    //  *** Validation Rules  ***

    rules: {
        email: {
            required: true,
            email: true
        },
        password: {
            required: true,
            minlength: 8,
            maxlength: 60
        },
        repassword: {
            required: true,
            minlength: 8,
            maxlength: 60,
            equalTo: '#password'
        },
        agreeBox: {
            required: true
        }
    },

    //  ***  Validation error messages  ***

    messages: {

        email: "Please enter a valid email address",

        password: {
            required: "Please provide a password",
            minlength: "Your password must be at least 8 characters long",
            maxlength: "Your password can't be more than 60 characters"
        },

        repassword: {
            required: "Please provide your password",
            minlength: "Your password must be at least 8 characters long",
            maxlength: "Your password can't be more than 60 characters",
            equalTo: "Your password must equal your first password"
        },
        agreeBox: {
            required: "Please read conditions and tick box"
        }
    },

    submitHandler: function () {
        ev.preventDefault();

        var userEmail = $('input[id="emailId"]').val();
        var userPass = $('input[id="passId"]').val();

        $.ajax({
            method: 'POST',
            url: 'my database (this has been replaced)',
            data: JSON.stringify({
                name: userEmail,
                password: userPass,
                status: 'user',
            }),
            contentType: "Application/json",
            dataType: "json",
            success: function () {
                swal("Lets Go Shopping!", {
                    buttons: {
                        confirm: "Go Shopping",
                    },
                })
                    .then(() => {
                        window.location = 'index.html';
                    });
            }
        })
        return false;
    }

});

Try the below answer. https://stackoverflow.com/questions/18863773/submitting-a-form-with-ajax-after-jquery-validation-is-successfull — Pushprajsinh Chudasama, Oct 25 '19 at 03:13

score 0 · Answer 1 · answered Oct 25 '19 at 03:36

The issue that you have is with the AJAX call syntax or usage. You have used both success and then calls simultaneously. You need to have either success or then.

If you need success then it should be inside then like so.

$.ajax({
     method: 'POST',
     url: 'my database (this has been replaced)',  
     success: function( resp ) {
         console.log('the success function', resp );
     },
     error: function( req, status, err ) {
         console.log( 'Oops, something went wrong!!!', status, err );
     }
});

or you can use .then() like so

 $.ajax({   
     method: 'POST',
     url: 'my database (this has been replaced)'
 }).then( function( resp ) {
            console.log('the success function', resp );
         }, 
         function( req, status, err ) {
            console.log( 'Oops, something went wrong!!!', status, err ); 
});

Its like $.ajax({}).then(success, err)

Check out this post for further reading.

How can I send ajax call after validation is correct?

1 Answers1