Объединение JQuery Validation с последующей публикацией ajax

Question

Я уверен, что это просто, но я новичок в JQuery. Я использую плагин JQuery для проверки адреса электронной почты, это работает, и код:

$(document).ready(function () {
    $("#email").click(function () {
        $(this).attr({value: ''});
    });
    $("#subscribe-form").validate();
});

Затем я хочу опубликовать адрес электронной почты с помощью сообщения ajax, опять же, этот код работает без валидатора:

$(document).ready(function () {
    $('#submit').click(function () {
        var email = $('#email').val();
        var data = "email=" + email;
        $.ajax({
            type: "POST",
            url: "subscript.php",
            data: data,
        });
    });
});

То, что я, похоже, не могу сделать, это объединить их оба, чтобы, если электронное письмо было действительным, оно отправляло. Буду очень признателен за помощь в том, как это сделать.

Большое спасибо

Answer 1

.validate() можно настроить, передав объект с различными параметрами конфигурации. В этом случае установка submitHandler с обратным вызовом к коду отправки формы должна выполнить эту работу.

Я также немного очистил ваш пример кода, чтобы показать вам, как писать более идиоматические jQuery.

1. Я использовал jQuery.post() вместо jQuery.ajax(), поскольку jQuery.ajax() - это низкоуровневый метод, который используется только тогда, когда вы хотите настроить поведение запроса AJAX, очень похожее на то, как мы настраиваем поведение .validate().

2. Все входные данные формы можно подготовить для публикации, вызвав .serialize(). Это подготавливает URL-кодированную строку ключ-значение, такую ​​как name=John+Doe&email=john%40doe.com, которая затем может служить данными для POST.

* ** тысячи тридцать-три одна тысяча тридцать два * Пример * ** 1036 одна тысяча тридцать пять *

$(document).ready(function() {
    $('#myForm').validate({
        submitHandler: function(form) {
            $.post('subscript.php', $('#myForm').serialize());
        }
    });
}); 

Answer 2

Вы должны иметь возможность использовать опцию submitHandler, которая по сути будет функцией обратного вызова, которая вызывается при проверке формы:

$('#submit').click(function () {
    $("#subscribe-form").validate({
        submitHandler: function(form) {
            //do submit
        }
    });
});

Обратный вызов для обработки фактической отправки, когда форма действительна.Получает форму в качестве единственного аргумента.Заменяет отправку по умолчанию.Правильное место для отправки формы через Ajax после ее проверки.

Answer 3

Вы можете сделать что-то вроде следующего перед вызовом ajax для вызова проверки:

    if (!$('form').valid()) {
        return false;
    }

Answer 4

Перед тем как позвонить .ajax(), проверьте правильность формы, прежде чем продолжить, используя if ($('#subscribe-form').valid()) { ... }.