Проверка JQuery перед отправкой запроса AJAX

Question

У меня есть форма, которая позволяет пользователю редактировать информацию SMTP.Все обязательные поля имеют класс = "обязательный".Форма имеет две кнопки.

1. Сохранить
2. Тест

1) Сохранить

Когда пользовательнажимает кнопку сохранения, валидатор jQuery проверяет, все ли обязательные поля имеют какой-либо контент (class = "required"), а затем отправляет форму обычным способом.Это работает, как и ожидалось.

2) Тест

Когда пользователь нажимает кнопку теста, я использую $ .getJSON, чтобы выяснить, работает ли введенная информация.Однако до отправки запроса AJAX проверка не происходит.Я хочу, чтобы для этой кнопки требовались те же поля.

Как мне это сделать?

Кажется, проблема в том, как я ее настроил,никогда не существует действия отправки, которое запускает проверку.Является ли решение использовать опцию submitHandler для валидатора jQuery?Если да, как определить, какая кнопка была нажата?

Мой JS:

$(document).ready(function(){

    $('#testEmailProfile').click(function() {
        var map = { 
            m: 'testEmailProfile', 
            smtpHostname: $('#smtpHostname').val(),
            smtpPort: $('#smtpPort').val(),
            smtpUsername: $('#smtpUsername').val(),
            smtpPassword: $('#smtpPassword').val(),
        }
        $.getJSON('ajax.php', map, function(data) {
            if (data.success) {
                //Works
            } else {
                //Doesn't work
            }
        });
        return false;
    });

    $("#emailProfileForm").validate();

});

Answer 1

Я разделил форму на две отдельные формы, затем сделал это:

$("#emailProfileForm").validate();

$("#testEmailProfileForm").validate({
    submitHandler: function() {
        var map = { 
            m: 'testEmailProfile', 
            smtpHostname: $('#smtpHostname').val(),
            smtpPort: $('#smtpPort').val(),
            smtpUsername: $('#smtpUsername').val(),
            smtpPassword: $('#smtpPassword').val(),
        }
        $.getJSON('ajax.php', map, function(data) {
            if (data.success) {
                //Success
            } else {
                //Not success
            }
        });
    }
});

Возможно, не оптимальное решение ...

Answer 2

Валидатор Jquery предоставляет обработчик отправки для этого

$(".selector").validate({

   submitHandler: function(form) {

      $(form).ajaxSubmit();
   }
 });

Таким образом, вы можете включить все свои коды в функцию submitHandler.Это будет выполнено после успеха результатов проверки.

Answer 3

Размещение $ ("# emailProfileForm"). Validate ();здесь не так.Функции проверки должны вызываться перед отправкой ajax-запроса.

$(document).ready(function(){

    $('#testEmailProfile').click(function() {
        if($("#emailProfileForm").validate()) {
            var map = { 
                m: 'testEmailProfile', 
                smtpHostname: $('#smtpHostname').val(),
                smtpPort: $('#smtpPort').val(),
                smtpUsername: $('#smtpUsername').val(),
                smtpPassword: $('#smtpPassword').val(),
            }
            $.getJSON('ajax.php', map, function(data) {
                if (data.success) {
                    //Works
                } else {
                    //Doesn't work
                }
            });
        } else {
            return false;
        }
    });

});

Если вы используете плагин проверки формы jquery, пожалуйста, прочитайте больше здесь .