html5 атрибут ввода ввода не работает вне формы?

Question

this fiddle работает по назначению - он отображает предупреждение, когда пользователь вводит неверный код страны.

This other fiddle, без элемента form, не работает. Кажется, для атрибута ввода pattern требуется подтверждение для проверки form. Кстати, я делаю сложную страницу без форм, и я бы хотел проверить мои поля ввода с помощью `pattern. Есть ли способ сделать это?

Answer 1

Это связано с тем, что валидация является частью формы HTML5 (http://www.w3.org/TR/html5/forms.html#client-side-form-validation). Валидации инициируются, когда форма отправляется в случае возникновения каких-либо ошибок, отправка будет отменена.

Для того, чтобы вызвать его вручную, использовать функцию checkValidity() на элементе:

$('input').blur(function(evt) { 
    evt.target.checkValidity(); 
}).bind('invalid', function(event) { 
    alert('oops'); 
}); 

http://jsfiddle.net/y66vH/3/

Answer 2

Элемент должен быть частью формы. Если это невозможно, просто добавьте form="formID" к вашему «внешнему» элементу.

HTML

<form id="form1" action="demo_form.asp"> 
    <input type="submit" /> 
</form> 
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" form="form1" title="Three letter country code" /> 

JS скрипку: http://jsfiddle.net/y66vH/1/

Answer 3

Проверка производится в <form> время представления. Если вы хотите использовать естественную проверку браузера и соответствующий ему пользовательский интерфейс, вам необходимо использовать <form> с соответствующим вводом для ввода, чтобы пользователь мог естественно отправить форму.

Однако проверка активирована до инициировано событие отправки. Поэтому вы можете запретить поведение представления формы по умолчанию, сохраняя при этом собственную проверку.

document.querySelector("form").addEventListener("submit", function (e) { 
    e.preventDefault(); 
}); 

http://jsfiddle.net/ExplosionPIlls/2gaw3/1/

Answer 4

Ключевые моменты:

1. Да, проверка работы с Ajax форм.
2. Не используйте обработчик onclick. Используйте форму onsubmit на обертке, и ваша кнопка будет type="submit" под этой формой.
3. В своем обработчике изображений используйте шаблон, например if (!theFormOrInput.checkValidity()) return;.
4. После вы должны позвонить по номеру или проверить, не будет ли отображаться браузер. Проверка является частью действия по умолчанию; если вы отменяете слишком рано, вы непреднамеренно отказываетесь.