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

Question

У меня есть форма с несколькими различными наборами полей. У меня есть Javascript, который отображает наборы полей для пользователей по одному. Для браузеров, которые поддерживают проверку HTML5, я бы хотел использовать ее. Однако мне нужно сделать это на моих условиях. Я использую JQuery.

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

В идеале, когда пользователь теряет фокус на элементе, происходит проверка.

В настоящее время у меня есть novalidate, идущий и использующий Javascript. Предпочел бы использовать нативный метод. :)

Answer 1

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.

Answer 2

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

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

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

Answer 3

В некоторой степени, вы МОЖЕТЕ trigger Проверка формы HTML5 и показывать пользователю подсказки без отправки формы!

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

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

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

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

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

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

Answer 4

Довольно просто добавить или удалить проверку 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);

    });

});

Answer 5

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

Answer 6

Код 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>

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

Answer 7

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">

Answer 8

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

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

Answer 9

Кажется, я нашел хитрость: Просто удалите атрибут формы 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>

Answer 10

Еще один способ решения этой проблемы:

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