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

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

Коли користувач натискає посилання JS, щоб перейти до наступного набору полів, мені потрібно, щоб перевірка відбулася на поточному наборі полів і заблокувала користувачеві рух вперед, якщо є проблеми.

В ідеалі, коли користувач втрачає фокус на елементі, відбуватиметься перевірка.

Наразі не маєте дії, щоб користуватися Javascript. Віддав би перевагу використанню власного методу. :)

Ви не можете запустити власний інтерфейс перевірки, але ви можете легко скористатися перевіркою API для довільних елементів введення:

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

Перша подія спрацьовує checkValidityна кожному вхідному елементі, як тільки він втрачає фокус, якщо елемент є, invalidтоді відповідна подія буде запущена і затримана другим обробником події. Це повертає фокус до елемента, але це може викликати неприємність, я думаю, у вас є краще рішення для сповіщення про помилки. Ось робочий приклад мого коду вище .

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.

Певною мірою Ви МОЖЕТЕ triggerперевірити форму HTML5 і показати підказки користувачеві, не подаючи форму!

Дві кнопки, одна для перевірки, друга для подання

Встановіть onclickслухача на кнопку перевірки, щоб встановити глобальний прапор (скажімо justValidate), щоб вказати, що цей клік призначений для перевірки перевірки форми.

І встановіть onclickслухача на кнопку подання, щоб встановити justValidateпрапор на false.

Потім у onsubmitобробнику форми ви перевіряєте прапорець, justValidateщоб вирішити значення, що повертається, і викликаєте, preventDefault()щоб зупинити подання форми. Як відомо, перевірка форми HTML5 (і підказка графічного інтерфейсу користувача) проводиться перед onsubmitподією, і навіть якщо форма ДІЙСНЯ, ви можете зупинити подання форми, повернувши false або викликати preventDefault().

І в HTML5 у вас є метод перевірки перевірки форми: the form.checkValidity(), тоді ви можете знати, чи форма перевірена чи ні у вашому коді.

Добре, ось демонстрація: http://jsbin.com/buvuku/2/edit

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

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

    });

});

Здається, я знаходжу підступ: просто видаліть 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>

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

Сподіваюся, це допоможе вам

Коли існує дуже складний (особливо асинхронний) процес перевірки, існує просте обхідне рішення:

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

Інший спосіб вирішення цієї проблеми:

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