Как форсировать проверку формы html5, не отправляя ее через jQuery


286

У меня есть эта форма в моем приложении, и я отправлю ее через AJAX, но я хочу использовать HTML5 для проверки на стороне клиента. Поэтому я хочу иметь возможность форсировать проверку формы, возможно, через jQuery.

Я хочу запустить валидацию без отправки формы. Является ли это возможным?


Можете ли вы указать, в какой момент вы хотите проверить форму? Что запускает проверку? Хотите ли вы проверить каждое поле, когда пользователь вводит, вводит / покидает поле, меняет значение?
Питер Пайчл

6
Я хотел бы иметь возможность сделать что-то подобное: $ ("# my_form"). TriggerHtml5Validation ()
razenha

Эта страница может помочь ссылка
Дэн Брей

Вы можете достичь этого без JQuery. Смотрите мое решение.
Дэн Брей,

Ответы:


444

Чтобы проверить, является ли определенное поле допустимым, используйте:

$('#myField')[0].checkValidity(); // returns true/false

Чтобы проверить правильность формы, используйте:

$('#myForm')[0].checkValidity(); // returns true/false

Если вы хотите отобразить собственные сообщения об ошибках, которые есть в некоторых браузерах (например, Chrome), к сожалению, единственный способ сделать это - отправить форму, например так:

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

if(! $myForm[0].checkValidity()) {
  // If the form is invalid, submit it. The form won't actually submit;
  // this will just cause the browser to display the native HTML5 error messages.
  $myForm.find(':submit').click();
}

Надеюсь это поможет. Имейте в виду, что проверка HTML5 поддерживается не во всех браузерах.


1
Я попробовал ваше решение, но оно все еще отправляет форму при выполнении строки $ myForm.submit ().
Яшпал Сингла

27
Попробуйте заменить $myForm.submit()на$myForm.find(':submit').click()
Авраам

8
Авраам прав. Вы должны фактически нажать кнопку отправки (программно). Вызов $ myForm.submit () не вызовет проверку.
Кевин Тайге

75
Если в вашей форме нет кнопки отправки, вы можете подделать ее:$('<input type="submit">').hide().appendTo($myForm).click().remove();
philfreo

15
Этот ответ очень полезен из-за подсказки checkValidity(), но в нем также есть опасная ошибка. checkValidity()это то, что вызывает собственные сообщения об ошибках браузера, а не нажатие кнопки отправки. Если у вас есть прослушиватель событий, который прослушивает нажатие кнопки отправки, вы активируете его, когда выполняете `$ myForm.find (': submit'). Click ()`, который запускается сам и вызывает бесконечную рекурсию.
Неправильный запрос

30

Я нашел это решение работать на меня. Просто вызовите функцию JavaScript следующим образом:

action="javascript:myFunction();"

Тогда у вас есть проверка HTML5 ... очень просто :-)


3
Это сработало и для меня, и я думаю, что это лучший ответ. Я установил action="javascript:0"на <form>и связанное clickсобытии на <button>до MyFunction()и все работало замечательно. Я держу все JS вне HTML. MyFunctionЗатем можно проверить, form.checkValidity()чтобы продолжить.
Орад

3
Пример кода всегда полезен.
Би Джей Патель

10
Привязка к форме onsubmit()почти всегда лучше, чем к кнопке onclick(), так как существуют другие способы отправки формы. (В частности, нажав returnклавишу.)
alttag

+1 Это потрясающе. больше не требуется валидация метода javascript, если поле пустое или его адрес электронной почты. Браузер может сделать это для нас! Совместим ли этот кросс-браузер?
Джо Э.

2
Ни то, action="javascript:myFunction();"ни другое action="javascript:0"больше не работает в последней версии Firefox (67). Работает на Chrome, хотя.
Бобз

23
    if $("form")[0].checkValidity()
      $.ajax(
        url: "url"
        type: "post"
        data: {

        }
        dataType: "json"
        success: (data) ->

      )
    else
      #important
      $("form")[0].reportValidity()

от: проверка формы html5


4
reportValidityэто поддерживается только на Chrome 40.0
MM

Это CoffeeScript.
амфетамина

1
reportValidity теперь поддерживается Firefox начиная с версии 49
Джастин

Мне нравится эта часть $("form")[0].reportValidity(). Мне это нужно в случае, если проверка достоверности не удалась.
Fsevenm

Большой! Спасибо!
stefo91

18

код ниже работает для меня,

$("#btn").click(function () {

    if ($("#frm")[0].checkValidity())
        alert('sucess');
    else
        //Validate Form
        $("#frm")[0].reportValidity()

});

1
reportValidity()это лучшая функция для выделения обязательных полей.
Джамшад Ахмад

Да, это работает как брелок, но только если браузер его поддерживает. caniuse.com/#search=reportValidity
MegaMatt

16

Вот более общий способ, который немного чище:

Создайте свою форму следующим образом (может быть фиктивной формой, которая ничего не делает):

<form class="validateDontSubmit">
...

Свяжите все формы, которые вы действительно не хотите отправлять:

$(document).on('submit','.validateDontSubmit',function (e) {
    //prevent the form from doing a submit
    e.preventDefault();
    return false;
})

Теперь предположим, что у вас есть <a>(в пределах <form>), что при нажатии вы хотите проверить форму:

$('#myLink').click(function(e){
  //Leverage the HTML5 validation w/ ajax. Have to submit to get em. Wont actually submit cuz form
  //has .validateDontSubmit class
  var $theForm = $(this).closest('form');
  //Some browsers don't implement checkValidity
  if (( typeof($theForm[0].checkValidity) == "function" ) && !$theForm[0].checkValidity()) {
     return;
  }

  //if you've gotten here - play on playa'
});

Несколько заметок здесь:

  • Я заметил, что вам не нужно на самом деле отправлять форму для проверки - вызов checkValidity()достаточно (по крайней мере, в Chrome). Если бы другие могли добавить комментарии с проверкой этой теории в других браузерах, я обновлю этот ответ.
  • То, что вызывает проверку, не обязательно должно быть внутри <form>. Это был простой и гибкий способ получить решение общего назначения.

12

Может быть, опоздал на вечеринку, но все же каким-то образом я нашел этот вопрос, пытаясь решить подобную проблему. Поскольку никакой код с этой страницы не работал для меня, тем временем я нашел решение, которое работает как указано.

Проблема в том, что ваша <form>DOM содержит один <button>элемент, который <button>будет запущен, который автоматически получит форму. Если вы играете с AJAX, вам, вероятно, нужно запретить действие по умолчанию. Но есть одна загвоздка: если вы просто сделаете это, вы также предотвратите базовую проверку HTML5. Таким образом, рекомендуется не задавать значения по умолчанию для этой кнопки, только если форма действительна. В противном случае проверка HTML5 защитит Вас от отправки. jQuery checkValidity()поможет с этим:

JQuery:

$(document).ready(function() {
  $('#buttonID').on('click', function(event) {
    var isvalidate = $("#formID")[0].checkValidity();
    if (isvalidate) {
      event.preventDefault();
      // HERE YOU CAN PUT YOUR AJAX CALL
    }
  });
});

Описанный выше код позволит Вам использовать базовую проверку HTML5 (с сопоставлением типов и шаблонов) БЕЗ отправки формы.


6

Вы говорите о двух разных вещах: «проверка HTML5» и проверка формы HTML с использованием javascript / jquery.

HTML5 «имеет» встроенные опции для проверки формы. Например, использование атрибута required в поле, что может (в зависимости от реализации браузера) отказать в отправке формы без использования javascript / jquery.

С javascrip / jquery вы можете сделать что-то вроде этого

$('your_form_id').bind('submit', function() {
   // validate your form here
   return (valid) ? true : false;
});

2
Я хочу запустить валидацию без отправки формы.
Разенха

Что касается вашего обновления - я все еще думаю, что это правильное решение. Вы не указали, как вы хотите вызвать triggerHtml5Validation()функцию. Приведенный выше код прикрепит событие отправки к вашей форме; при отправке вы перехватываете событие и подтверждаете форму. Если вы никогда не хотите отправлять форму, просто return false;и отправка никогда не произойдет.
Питер Пайчл

7
return (valid) ? true : false=== return valid. :)
Дави Косцянски Видаль

1
К сожалению, я добавил +1 на @davi, потому что сначала думал точно так же. Но это не совсем то же самое, так как просто return validне возвращает false для нулевых / неопределенных значений. Но это на самом деле не имеет значения, в любом случае ответ был псевдокод, суть в том, что используйте return false, чтобы не отправлять форму ^^
T_D

5
var $myForm = $('#myForm ');
if (!$myForm[0].checkValidity()) {
  $('<input type="submit">').hide().appendTo($myForm).click().remove();
}

это не работает на Chrome 74. Могу ли я пролить свет на это?
Codexplorer

3

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

Вы должны назначить обязательный атрибут для элементов управления.

  $("#btnSave").click(function () {
    $(":input[required]").each(function () {                     
        var myForm = $('#form1');
        if (!$myForm[0].checkValidity()) 
          {                
            $(myForm).submit();              
          }
        });
  });

3

Вам не нужен JQuery для достижения этой цели. В вашей форме добавьте:

onsubmit="return buttonSubmit(this)

или в JavaScript:

myform.setAttribute("onsubmit", "return buttonSubmit(this)");

В вашей buttonSubmitфункции (или как вы это называете), вы можете отправить форму с помощью AJAX. buttonSubmitбудет вызван только если ваша форма проверена в HTML5.

Если это кому-нибудь поможет, вот моя buttonSubmitфункция:

function buttonSubmit(e)
{
    var ajax;
    var formData = new FormData();
    for (i = 0; i < e.elements.length; i++)
    {
        if (e.elements[i].type == "submit")
        {
            if (submitvalue == e.elements[i].value)
            {
                submit = e.elements[i];
                submit.disabled = true;
            }
        }
        else if (e.elements[i].type == "radio")
        {
            if (e.elements[i].checked)
                formData.append(e.elements[i].name, e.elements[i].value);
        }
        else
            formData.append(e.elements[i].name, e.elements[i].value);
    }
    formData.append("javascript", "javascript");
    var action = e.action;
    status = action.split('/').reverse()[0] + "-status";
    ajax = new XMLHttpRequest();
    ajax.addEventListener("load", manageLoad, false);
    ajax.addEventListener("error", manageError, false);
    ajax.open("POST", action);
    ajax.send(formData);
    return false;
}

Некоторые из моих форм содержат несколько кнопок отправки, отсюда и эта строка if (submitvalue == e.elements[i].value). Я установил значение submitvalueиспользования события клика.


2

У меня была довольно сложная ситуация, когда мне нужно было несколько кнопок отправки для обработки разных вещей. Например, Сохранить и Удалить.

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

Также событие отправки было переопределено в случае, если пользователь нажал клавишу ввода, чтобы вызвать ожидаемую отправку по умолчанию; в этом примере сохранить.

Вот усилия по обработке формы, чтобы по-прежнему работать с / без javascript и с проверкой html5, с событиями submit и click.

jsFiddle Demo - проверка HTML5 с переопределением отправки и клика

одной рубрике

<form>
    <input type="text" required="required" value="" placeholder="test" />
    <button type="submit" name="save">Save</button>
    <button type="submit" name="delete">Delete</button>
</form>

JavaScript

//wrap our script in an annonymous function so that it can not be affected by other scripts and does not interact with other scripts
//ensures jQuery is the only thing declared as $
(function($){
    var isValid = null;
    var form = $('form');
    var submitButton = form.find('button[type="submit"]')
    var saveButton = submitButton.filter('[name="save"]');
    var deleteButton = submitButton.filter('[name="delete"]');

    //submit form behavior
    var submitForm = function(e){
        console.log('form submit');
        //prevent form from submitting valid or invalid
        e.preventDefault();
        //user clicked and the form was not valid
        if(isValid === false){
            isValid = null;
            return false;
        }
        //user pressed enter, process as if they clicked save instead
        saveButton.trigger('click');
    };

    //override submit button behavior
    var submitClick = function(e){
        //Test form validitiy (HTML5) and store it in a global variable so both functions can use it
        isValid = form[0].checkValidity();
        if(false === isValid){
            //allow the browser's default submit event behavior 
            return true;
        }
        //prevent default behavior
        e.preventDefault();
        //additional processing - $.ajax() etc
        //.........
        alert('Success');
    };

    //override submit form event
    form.submit(submitForm);

    //override submit button click event
    submitButton.click(submitClick);
})(jQuery);

Предостережение в использовании Javascript заключается в том, что стандартный щелчок браузера должен распространяться на событие отправки ДОЛЖНО происходить для отображения сообщений об ошибках без поддержки каждого браузера в вашем коде. В противном случае, если событие click переопределено с помощью event.preventDefault () или вернет false, оно никогда не будет распространено на событие отправки браузера.

Следует отметить, что в некоторых браузерах не будет инициировать отправку формы, когда пользователь нажимает клавишу ввода, вместо этого она будет вызывать первую кнопку отправки в форме. Следовательно, существует console.log ('form submit'), чтобы показать, что он не запускается.


Мы хорошо знаем, что это можно сделать без jQuery, но OP создал заголовок этой темы: «Как вызвать проверку формы html5 без отправки ее через jQuery», явно предлагая использовать jQuery.
vzr

@vzr Мой ответ использует jQueryявно. Он отличается тем, что обрабатывает проверку HTML5 с помощью нескольких кнопок отправки и предотвращает отправку формы AJAX, если она недействительна. По умолчанию это saveдействие, когда пользователь нажимает enterклавишу на клавиатуре. Что на момент моей публикации ни один из предоставленных ответов не был решением для нескольких кнопок отправки или захвата клавиши ввода, чтобы предотвратить передачу ajax.
фырье

2

Вы можете сделать это без отправки формы.

Например, если форма отправки кнопки с идентификатором «поиск» находится в другой форме. Вы можете вызвать событие click для этой кнопки отправки и вызвать ev.preventDefault после этого. Для моего случая я проверяю форму B на основании формы A. Как это

function validateFormB(ev){ // DOM Event object
  //search is in Form A
  $("#search").click();
  ev.preventDefault();
  //Form B validation from here on
}

2

Этот способ хорошо работает для меня:

  1. Добавьте onSubmitатрибут в свой form, не забудьте включить returnв значение.

    <form id='frm-contact' method='POST' action='' onSubmit="return contact()">
  2. Определите функцию.

    function contact(params) {
        $.ajax({
            url: 'sendmail.php',
            type: "POST",
            dataType: "json",
            timeout: 5000,
            data: { params:params },
            success: function (data, textStatus, jqXHR) {
                // callback
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(jqXHR.responseText);
            }
        });
    
        return false;
    }


1

Я знаю, что на это уже ответили, но у меня есть другое возможное решение.

Если вы используете jquery, вы можете сделать это.

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

$.extend({
    bypassDefaultSubmit: function (formName, newSubmitMethod) {
        $('#'+formName).submit(function (event) {
            newSubmitMethod();
            event.preventDefault();
        }
    }
});

Затем сделайте что-то вроде этого, где вы хотите использовать это.

<script type="text/javascript">
    /*if you want to validate the form on a submit call, 
      and you never want the form to be submitted via
      a normal submit operation, or maybe you want handle it.
    */
    $(function () {
        $.bypassDefaultSubmit('form1', submit);
    });
    function submit(){ 
        //do something, or nothing if you just want the validation
    }

</script>


1

Это сработало для отображения собственных сообщений об ошибках HTML 5 с проверкой формы.

<button id="btnRegister" class="btn btn-success btn btn-lg" type="submit"> Register </button>



$('#RegForm').on('submit', function () 
{

if (this.checkValidity() == false) 
{

 // if form is not valid show native error messages 

return false;

}
else
{

 // if form is valid , show please wait message and disable the button

 $("#btnRegister").html("<i class='fa fa-spinner fa-spin'></i> Please Wait...");

 $(this).find(':submit').attr('disabled', 'disabled');

}


});

Примечание: RegForm является form id.

Ссылка

Надежда помогает кому-то.


Вы должны добавить событие, чтобы включить отключенную кнопку отправки
talsibony

1

Это довольно простой способ заставить HTML5 выполнять проверку для любой формы, но при этом иметь современный контроль JS над формой. Единственное предостережение - кнопка отправки должна быть внутри <form>.

HTML

<form id="newUserForm" name="create">
Email<input type="email" name="username" id="username" size="25" required>
Phone<input type="tel" id="phone" name="phone" pattern="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" size="12" maxlength="12" required>
<input id="submit" type="submit" value="Create Account" >
</form>

JS

// bind in ready() function
jQuery( "#submit" ).click( newAcctSubmit );

function newAcctSubmit()
{
  var myForm = jQuery( "#newUserForm" );

  // html 5 is doing the form validation for us,
  // so no need here (but backend will need to still for security)
  if ( ! myForm[0].checkValidity() )
  {
    // bonk! failed to validate, so return true which lets the
    // browser show native validation messages to the user
    return true;
  }

  // post form with jQuery or whatever you want to do with a valid form!
  var formVars = myForm.serialize();
  etc...
}

0

Я думаю, что лучший подход

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

И мы можем использовать функцию validation validation ( jQuery ), которая проверяет, является ли выбранная форма действительной или все выбранные элементы действительны без отправки формы.

<form id="myform">
   <input type="text" name="name" required>
   <br>
   <button type="button">Validate!</button>
</form>
<script>
  var form = $( "#myform" );
  form.validate();
  $( "button" ).click(function() {
    console.log( "Valid: " + form.valid() );
  });
</script>

0

В соответствии с вопросом, валидность html5 должна быть проверена сначала с помощью jQuery, и в большинстве ответов этого не происходит, и причина этого заключается в следующем:

при проверке с использованием функции формы HTML5 по умолчанию

checkValidity();// returns true/false

мы должны понимать, что jQuery возвращает массив объектов, выбирая вот так

$("#myForm")

поэтому вам нужно указать первый индекс, чтобы функция checkValidity () работала

$('#myForm')[0].checkValidity()

вот полное решение:

<button type="button" name="button" onclick="saveData()">Save</button>

function saveData()
{
    if($('#myForm')[0].checkValidity()){
        $.ajax({
          type: "POST",
          url: "save.php",
          data: data,
          success: function(resp){console.log("Response: "+resp);}
        });
    }
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.