Как проверить правильность формы HTML5, которая не содержит кнопку отправки?

У меня есть следующий пример кода, который работает в браузерах, которые проверяют, когда они видят HTML5 "требуется" на входе, например, здесь:

<form id='myForm'>
    <div>
    <label>Email:
      <input name=email type=email required title="enter your email">
    </label>
    <input type=submit>
    </div>
</form>

Ниже приведено fiddle.

Однако в моем приложении я использую кнопку вне формы и следующий код, прикрепленный к событию клика этой кнопки:

if (!$form.valid || $form.valid()) {
    $submitBt
        .disableBt();
    $modal
        .removeBlockMessages()
        .blockMessage('Contacting Server, please wait ... ', {
            type: 'loading'
        });
    $.ajax({
        url: href,
        dataType: 'json',
        type: 'POST',
        data: $form.serializeArray()
    })
        .done(onDone)
        .fail(onFail);
}

У меня есть два вопроса:

Что делает следующий код: (! $form.valid || $form.valid())
Как проверить правильность формы, используя новые проверки HTML5?

Ответ 1

Предполагая, что вы установили элемент формы в объект с именем $form, тогда if (!$form.valid || $form.valid()) - это умный синтаксис, который означает "если $form не имеет метода с именем valid, или если valid() возвращает правда". Как правило, вы должны установить и инициализировать плагин проверки jQuery, но это не позволяет формам отключиться, если плагин проверки не загружен.

Вы можете сделать аналогичный тест, используя метод HTML5 checkValidity, выглядя примерно так:

if (!$form.checkValidity || $form.checkValidity()) {
  /* submit the form */
}

EDIT: checkValidity функция из спецификации форм HTML5. По состоянию на февраль 2016 года CanIUse.com сообщает, что более 95% браузеров поддерживают его.

Ответ 2

В HTML5 вы можете использовать атрибут "form" для элемента, чтобы явно связать его с элементом Form независимо от того, где он расположен в структуре страницы: http://developers.whatwg.org/association-of-controls-and-forms.html#attr-fae-form

В совместимых браузерах вы должны располагать свой элемент [type = submit] [form = id] в любом месте и по-прежнему корректно запускать процесс проверки и отправки.

Я склонен помещать код, который должен перехватить процесс отправки в обработчике событий "submit", таким образом, он запускается пользователями, нажимающими клавишу Enter, а также любые кнопки ввода [type = submit], которые у меня есть.