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?
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/
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/
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With