HTML5 input validation with function rather than pattern

Question

I have a form where some inputs like email get validated with a regex in HTML5. I need to validate other inputs where I cannot use a pattern. I need to look into a database and look for duplicates. Can I validate by calling some function rather than using pattern?

I could validate as the user types something by calling some function, but my end goal is to achieve UI consistency. Because the email input is validated using pattern and a regex, the UI is created by the browser, so I wan the same UI when validating other fields where I cannot use regex.

This is possible to do, but you'd be distancing yourself from HTML5-style validation, especially since your function would have to be asynchronous to look up a database. (I'm 99% certain "pre-HTML5" JS validation frameworks are out there, so you could try any of those) — Katana314
– Katana314, Commented Dec 23, 2014 at 16:52
You can do it, just do and AJAX request to validate your data against the DB. — ianaya89
– ianaya89, Commented Dec 23, 2014 at 16:52
You can use jQuery to easily achieve this effect. You can use the jQuery.change() function to basically validate inputs on the fly using jQuery.ajax(), or the specific jquery.post()/jquery.get() functions. — 9997
– 9997, Commented Dec 23, 2014 at 16:56
I need to display an error message if the user enters a duplicate value. Is it possible to achieve the same UI as with HTML5 since the message is dependent on the browser? — jac0117
– jac0117, Commented Dec 23, 2014 at 17:02
jac0117, your question in a comment is much more specific and easily answerable (the answer is “no”). but different from the original question. — Jukka K. Korpela
– Jukka K. Korpela, Commented Dec 23, 2014 at 17:30

Klesun · Accepted Answer · 2019-03-21 17:14:21Z

3

Yes, this is possible! With setCustomValidity.

You just need to get your input element (either through a callback, or document.getElementBy...) and call

element.setCustomValidity('message here')

If the input is valid, you can call

element.setCustomValidity('')

to clear the error message.

For example:

<input name='email' onchange='checkEmail(this)'></input>

then define checkEmail...

function checkEmail(element) {
    ajaxCallToServer(element.value, function callback(hypotheticalResponse) {
        if (hypotheticalResponse.isOk) {
            element.setCustomValidity('');
        } else {
            element.setCustomValidity('Sorry that email is already taken!');
        }
    });
}

edited Mar 21, 2019 at 17:14

Klesun

14.1k7 gold badges66 silver badges60 bronze badges

answered Dec 23, 2014 at 22:59

dave00000002

461 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Jukka K. Korpela · Accepted Answer · 2014-12-23 17:32:08Z

1

No, HTML5 validation has no function concept. It is in principle language-agnostic and does not even postulate JavaScript support in the browser. It supports only the checks described in HTML5 specs.

answered Dec 23, 2014 at 17:32

Jukka K. Korpela

203k38 gold badges281 silver badges408 bronze badges

Collectives™ on Stack Overflow

HTML5 input validation with function rather than pattern

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related