html5 input pattern attribute not working outside a form?

Question

this fiddle works as intended - it displays a warning when the user enters an invalid country code.

This other fiddle, without the form element, doesn't work. It seems the input's pattern attribute needs a form to validate. By the way, I'm doing a complex page without forms and I' d like to validate my input fields with `pattern. Is there a way to do that?

Answer 1

This is because the validation is part of the HTML5 form validation (http://www.w3.org/TR/html5/forms.html#client-side-form-validation). The validations are triggered when the form is submitted en when there are any errors, the submit will be cancelled.

To trigger it manually, use the checkValidity() function on the element:

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

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

Answer 2

Validation is done at <form> submission time. If you want to use the browser's natural form validation and its corresponding UI, you need to use a <form> with a corresponding submit input to allow the user to submit the form naturally.

However, validation is triggered before the submission event is triggered. Therefore, you can prevent the default form submission behavior while still using the browser's own validation.

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

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

Answer 3

The element must be part of the form. If that is not possible, just add form="formID" to your "outside" element.

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 fiddle: http://jsfiddle.net/y66vH/1/

Answer 4

The key points are:

1. Yes, validation works with ajax forms.
2. Don't use an onclick handler. Use onsubmit on a wrapping form and have your button be type="submit" under that form.
3. In your submit handler, use a pattern like if (!theFormOrInput.checkValidity()) return; right away.
4. You must call event.preventDefault() after the validity check or else the browser popover won't display. Validation is part of the default action; if you cancel too early you're unintentionally opting out.