Проверка HTML5 перед отправкой ajax

Это должно быть просто, но это сводит меня с ума. У меня есть форма html5, которую я отправляю с помощью ajax. Если вы введете недопустимое значение, появится ответ всплывающего окна, который сообщает об этом. Как я могу проверить, что записи действительны до запуска моего ajax submit?

форма:

<form id="contactForm" onsubmit="return false;">
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" required placeholder="Name" />
  <label for="subject">Subject:</label>
  <input type="text" name="subject" id="subject" required placeholder="Subject" />
  <label for="email">Email:</label>
  <input type="email" name="email" id="email" required placeholder="[email protected]" />
  <label for="message">Message:</label>
  <textarea name="message" id="message" required></textarea>
  <input type="submit" id="submit"/>
</form>

представить:

$('#submit').click(function(){
    var name = $("input#name").val();
    var subject = $("input#subject").val();
    var email = $("input#email").val();
    var message = $("input#message").val();

    var dataString = 'email=' + email + '&message=' + message + '&subject=' + subject + '&name=' + name ; 

    $.ajax({
        url: "scripts/mail.php",
        type:   'POST',
        data: dataString,
        success: function(msg){
            disablePopupContact();
            $("#popupMessageSent").css("visibility", "visible");
        },
        error: function() {
            alert("Bad submit");
        }
    });
});

Ответы

Ответ 1

По умолчанию jQuery ничего не знает о проверке HTML5, поэтому вам нужно будет сделать что-то вроде:

$('#submit').click(function(){
    if($("form")[0].checkValidity()) {
        //your form execution code
    }else console.log("invalid form");
});

Ответ 2

Если вы привязываетесь к событию отправки, а не клику, оно будет срабатывать только в том случае, если оно пройдет проверку HTML5.

Лучше всего кэшировать селектор jQuery в переменных, если вы используете его несколько раз, поэтому вам не нужно перемещаться по DOM каждый раз, когда вы обращаетесь к элементу. jQuery также предоставляет функцию .serialize(), которая будет обрабатывать синтаксический анализ данных формы для вас.

var $contactForm = $('#contactForm');

$contactForm.on('submit', function(ev){
    ev.preventDefault();

    $.ajax({
        url: "scripts/mail.php",
        type:   'POST',
        data: $contactForm.serialize(),
        success: function(msg){
            disablePopupContact();
            $("#popupMessageSent").css("visibility", "visible");
        },
        error: function() {
            alert("Bad submit");
        }
    });
});

Ответ 3

Если вы используете проверку формы HTML5, вам нужно отправить запрос ajax в обработчик отправки формы. Обработчик отправки будет запускаться только в том случае, если форма проверяется. То, что вы используете, - это обработчик нажатия кнопки, который всегда запускается, потому что он не связан с проверкой формы. ПРИМЕЧАНИЕ. Не все браузеры поддерживают проверку формы html5.

Ответ 4

Не совсем уверен, что вы имеете в виду. Но я предполагаю, что вы хотите проверить в реальном времени, если вход действителен. Если это так, вы должны использовать .keyup вместо события .click, потому что это приведет к действию, если пользователь нажмет submit. Посмотрите http://api.jquery.com/keyup/

С помощью этого вы можете проверить ввод с каждой новой вставкой и отображением символов, например. msgstr "недействительно", пока ваша проверка не верна.

Надеюсь, это ответит на ваш вопрос!

Ответ 5

Я предпочитаю использовать обработчик отправки jQuery, вы все равно получите ответ на свою форму со следующим методом.

jQuery('#contactForm').on('submit', function (e) {
    if (document.getElementById("contactForm").checkValidity()) {
        e.preventDefault();
        jQuery.ajax({
            url: '/some/url',
            method: 'POST',
            data: jQuery('#contactForm').serialize(),
            success: function (response) {
                //do stuff with response
            }
        })
    }
    return true;
});

Ответ 6

U также может использовать метод проверки jquery для проверки формы, например

$( "# form id" ). validate();

которые возвращают логическое значение на основе проверки формы, а также вы можете увидеть ошибку в журнале, используя метод errorList.

для использования выше функциональности u должен содержать файл jquery.validate.js в вашем script