Запуск проверки формы 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 или invoke preventDefault().

И в HTML5 у вас есть метод для проверки валидации формы: 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>

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

Для поля ввода

<input id="PrimaryPhNumber" type="text" name="mobile"  required
                                       pattern="^[789]\d{9}$" minlenght="10" maxLength="10" placeholder="Eg: 9444400000"
                                       class="inputBoxCss"/>

$('#PrimaryPhNumber').keyup(function (e) {
        console.log(e)
        let field=$(this)
        if(Number(field.val()).toString()=="NaN"){
            field.val('');
            field.focus();
            field[0].setCustomValidity('Please enter a valid phone number');
            field[0].reportValidity()
            $(":focus").css("border", "2px solid red");
        }
    })

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

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