Как я могу отправить вызов ajax после проверки правильности?

Question

Я пытаюсь отправить данные в свою базу данных heroku, у меня есть пользовательский ввод из html-файла и отправка его через мой jquery-файл, моя проверка работает, но я хочу отправить свой вызов ajax после того, как это действительно, то есть посленажали кнопку отправки. Кажется, он не доходит до моего вызова ajax (работает ajax). Бит успеха - моя попытка показать сообщение об успехе (swal - библиотека подсластителей и не уверен, что успех работает). Я считаю, что мой обработчик отправки виноват.

// * html-код формы *

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

// ***** мое содержимое в файле Jquery ******

$ ("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;
    }

});

Answer 1

У вас проблема с синтаксисом или использованием вызова AJAX. Вы использовали оба успеха, а затем звонили одновременно. Вы должны иметь успех или потом.

Если вам нужно success , тогда оно должно быть внутри, тогда вот так.

$.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 );
     }
});

или вы можете использовать .then () вот так

 $.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 ); 
});

Это похоже на $.ajax({}).then(success, err)

Прочтите этот пост для дальнейшего чтения.