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

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

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

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

$('#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 поддерживается не во всех браузерах.

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

action="javascript:myFunction();"

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

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

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

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

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

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

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

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

});

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

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

<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>. Это был простой и гибкий способ получить решение общего назначения.

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

Проблема в том, что ваша <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 (с сопоставлением типов и шаблонов) БЕЗ отправки формы.

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

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

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

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

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

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

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

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

Вам не нужен 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использования события клика.

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

Основанием было то, что это было также ненавязчиво, поэтому я не мог просто сделать его нормальной кнопкой. Но также хотел использовать проверку 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'), чтобы показать, что он не запускается.

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

Например, если форма отправки кнопки с идентификатором «поиск» находится в другой форме. Вы можете вызвать событие 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
}

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

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

$("#form").submit(function() { $("#saveButton").attr("disabled", true); });

не лучший ответ, но работает для меня.

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

Если вы используете 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>

$(document).on("submit", false);

submitButton.click(function(e) {
    if (form.checkValidity()) {
        form.submit();
    }
});

Это сработало для отображения собственных сообщений об ошибках 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.

Ссылка

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

Это довольно простой способ заставить 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...
}

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

будет использовать плагин 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>

В соответствии с вопросом, валидность 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);}
        });
    }
}