Запуск проверки формы HTML5

Ответ 1

Вы не можете инициировать собственный пользовательский интерфейс проверки подлинности, но вы можете легко использовать API проверки на произвольных входных элементах:

$('input').blur(function(event) {
    event.target.checkValidity();
}).bind('invalid', function(event) {
    setTimeout(function() { $(event.target).focus();}, 50);
});

Первое событие срабатывает checkValidity для каждого элемента ввода, как только он теряет фокус, если элемент invalid, то соответствующее событие будет запущено и захвачено вторым обработчиком событий. Это возвращает фокус обратно к элементу, но это может быть довольно неприятно, я полагаю, у вас есть лучшее решение для уведомления об ошибках. Вот рабочий пример моего кода выше.

Ответ 2

TL; DR: Не заботится о старых браузерах? Используйте form.reportValidity().

Нужна поддержка старых браузеров? Продолжайте читать.

На самом деле можно запустить проверку вручную.

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

Примите следующую HTML-форму:

<form>
  <input required>
  <button type="button">Trigger validation</button>
</form>

И давайте захватим наши элементы пользовательского интерфейса в JavaScript:

var form = document.querySelector('form')
var triggerButton = document.querySelector('button')

Не нужна поддержка устаревших браузеров, таких как Internet Explorer? Это для вас.

Все современные браузеры поддерживают метод reportValidity() для элементов form.

triggerButton.onclick = function () {
    form.reportValidity()
}

Это все, мы закончили. Кроме того, здесь простой CodePen с использованием этого подхода.

Подход для старых браузеров

Ниже приведено подробное объяснение того, как reportValidity() можно эмулировать в старых браузерах.

Однако вам не нужно самим копировать и вставлять эти блоки кода в свой проект - для вас есть ponyfill/polyfill.

Там, где reportValidity() не поддерживается, нам нужно немного обмануть браузер. Итак, что мы будем делать?

1. Проверьте правильность формы, позвонив по телефону form.checkValidity(). Это сообщит нам, если форма действительна, но не показывает интерфейс проверки.
2. Если форма недействительна, мы создаем временную кнопку отправки и запускаем клик по ней. Поскольку форма недействительна, мы знаем, что она на самом деле не будет отправлена, однако она покажет пользователю подсказки для проверки. Мы немедленно удалим кнопку временной отправки, чтобы она никогда не была видна пользователю.
3. Если форма действительна, нам вообще не нужно вмешиваться и позволить пользователю продолжить.

В коде:

triggerButton.onclick = function () {
  // Form is invalid!
  if (!form.checkValidity()) {
    // Create the temporary button, click and remove it
    var tmpSubmit = document.createElement('button')
    form.appendChild(tmpSubmit)
    tmpSubmit.click()
    form.removeChild(tmpSubmit)

  } else {
    // Form is valid, let the user proceed or do whatever we need to
  }
}

Этот код будет работать практически во всех распространенных браузерах (я успешно проверил его до IE11).

Вот рабочий пример CodePen.

Ответ 3

В некоторой степени, вы можете trigger HTML5 проверить форму и показать подсказки пользователю без отправки формы!

Две кнопки, одна для подтверждения, одна для отправки

Установите a onclick прослушиватель кнопки подтверждения, чтобы установить глобальный флаг (скажем justValidate), чтобы указать, что этот клик предназначен для проверки валидации формы.

И установите прослушиватель onclick на кнопку отправки, чтобы установить флаг justValidate в значение false.

Затем в обработчике onsubmit формы вы проверяете флаг justValidate, чтобы решить возвращаемое значение, и вызовите preventDefault(), чтобы остановить отправку формы. Как вы знаете, проверка формы HTML5 (и подсказка GUI для пользователя) предварительно сформирована перед событием onsubmit, и даже если форма VALID, вы можете остановить отправку формы, возвращая false или invoke preventDefault().

И в HTML5 у вас есть метод проверки проверки формы: form.checkValidity(), а затем вы можете узнать, подтверждена ли форма в коде.

ОК, вот демо: http://jsbin.com/buvuku/2/edit

Ответ 4

Я не уверен, что стоит напечатать все это с нуля, так как эта статья, опубликованная в List Apart, довольно неплохо объясняет это. У MDN также есть удобное руководство по формам и проверке HTML5 (охватывающее API, а также соответствующий CSS).

Ответ 5

Несколько проще сделать добавление или удаление проверки HTML5 в полях.

 $('form').each(function(){

    // CLEAR OUT ALL THE HTML5 REQUIRED ATTRS
    $(this).find('.required').attr('required', false);

    // ADD THEM BACK TO THE CURRENT FIELDSET
    // I'M JUST USING A CLASS TO IDENTIFY REQUIRED FIELDS
    $(this).find('fieldset.current .required').attr('required', true);

    $(this).submit(function(){

        var current     = $(this).find('fieldset.current')
        var next        = $(current).next()

        // MOVE THE CURRENT MARKER
        $(current).removeClass('current');
        $(next).addClass('current');

        // ADD THE REQUIRED TAGS TO THE NEXT PART
        // NO NEED TO REMOVE THE OLD ONES
        // SINCE THEY SHOULD BE FILLED OUT CORRECTLY
        $(next).find('.required').attr('required', true);

    });

});

Ответ 6

Кажется, я нашел хитрость: просто удалите target атрибут формы, затем используйте кнопку отправки, чтобы проверить форму и показать подсказки, проверить правильность формы с помощью JavaScript, а затем опубликовать что угодно. Следующий код работает для меня:

<form>
  <input name="foo" required>
  <button id="submit">Submit</button>
</form>

<script>
$('#submit').click( function(e){
  var isValid = true;
  $('form input').map(function() {
    isValid &= this.validity['valid'] ;
  }) ;
  if (isValid) {
    console.log('valid!');
    // post something..
  } else
    console.log('not valid!');
});
</script>

Ответ 7

HTML-код:

<form class="validateDontSubmit">
....
<button style="dislay:none">submit</button>
</form>
<button class="outside"></button>

JavaScript (с использованием Jquery):

<script type="text/javascript">

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

$(document).ready(function(){
// using button outside trigger click
    $('.outside').click(function() {
        $('.validateDontSubmit button').trigger('click');
    });
});
</script>

Надеюсь, что это поможет вам

Ответ 8

var field = $("#field")
field.keyup(function(ev){
    if(field[0].value.length < 10) {
        field[0].setCustomValidity("characters less than 10")
        
    }else if (field[0].value.length === 10) {
        field[0].setCustomValidity("characters equal to 10")
        
    }else if (field[0].value.length > 10 && field[0].value.length < 20) {
        field[0].setCustomValidity("characters greater than 10 and less than 20")
        
    }else if(field[0].validity.typeMismatch) {
    	field[0].setCustomValidity("wrong email message")
        
    }else {
    	field[0].setCustomValidity("") // no more errors
        
    }
    field[0].reportValidity()
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="email" id="field">

Ответ 9

Если существует очень сложный (особенно асинхронный) процесс проверки, существует простой способ:

<form id="form1">
<input type="button" onclick="javascript:submitIfVeryComplexValidationIsOk()" />
<input type="submit" id="form1_submit_hidden" style="display:none" />
</form>
...
<script>
function submitIfVeryComplexValidationIsOk() {
    var form1 = document.forms['form1']
    if (!form1.checkValidity()) {
        $("#form1_submit_hidden").click()
        return
    }

    if (checkForVeryComplexValidation() === 'Ok') {
         form1.submit()
    } else {
         alert('form is invalid')
    }
}
</script>

Ответ 10

Другой способ решить эту проблему:

$('input').oninvalid(function (event, errorMessage) {
    event.target.focus();
});