HTML5 input attributes, access via Javascript?

Question

as you might know, within the HTML5 spec we got some new attributes for <input> elements, such as required and pattern. This provides as a great way of validating user-input and we can even visualize it using CSS and pseudo selectors. Example

HTML

<input type="number" pattern="\d+" required/>

CSS

input:required:valid {
    border: 1px solid green;
}

input:required:invalid {
    border: 1px solid red;
}

If that <input> element would be part of an <form> element, an user wouldn't be able to submit that in invalid state.

However, my question is, what if we want to use those new attributes without <form> elements ? Is there a way to access the current state of such an <input> node through ECMAscript directly ?

Any event ? Any listener ?

Just doublechecking; With current state, you mean a JS way to check the validity of the input (As a property instead of a function you'd have to write)? — Cerbrus
– Cerbrus, Commented Jan 29, 2013 at 15:00
This is an interesting question - my (slight) research into the HTML5 form stuff suggested to me that it was designed under a philosophy of independence from scripting languages. You can read the "validity state" via the validityState property, but I don't know whether being outside a <form> breaks anything. — Pointy
– Pointy, Commented Jan 29, 2013 at 15:00

Community · Accepted Answer · 2021-01-18 12:34:40Z

22

As pointed out by @Zirak, there is the checkValidity method, part of the Constraint Validation API.

var s = document.createElement('input');
s.checkValidity(); // true
s.required = true;
s.checkValidity(); // false

However, checkValidity fires an invalid event if it's invalid. (The form will be red-outlined.) You may want to use the willValidate property (or the .validity.valid property) instead.

Also, the validity property is quite interesting to watch (more information about what each property means on the Constraint Validation API):

s.validity
    ValidityState
        customError: false
        patternMismatch: false
        rangeOverflow: false
        rangeUnderflow: false
        stepMismatch: false
        tooLong: false
        typeMismatch: false
        valid: false
        valueMissing: true

This article points out the differences in implementations between the browsers: http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/ (i.e: it's a mess, as usual.)

You can also listen to the invalid event, triggered on submit of the form, or when the checkValidity method is called.

Demo: http://jsfiddle.net/XfV4z/

edited Jan 18, 2021 at 12:34

CommunityBot

11 silver badge

answered Jan 29, 2013 at 15:00

Florian Margaine

61.2k15 gold badges94 silver badges120 bronze badges

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

8 Comments

jAndy Over a year ago

Yea hail @Zirak. I'll just do some browser compat tests right now.

Cerbrus Over a year ago

I beat you to the validity property :P

GNi33 Over a year ago

Zirak will haunt you in your dreams for that stolen rep!

Cerbrus Over a year ago

@GNi33, he'll have to get in line. Grrrrr. Still, it helps that a high-rep user adds validity to his answer, also :P An a different note: "(i.e: it's..." I see what you did there.

jAndy Over a year ago

Seems to worky pretty reliably across supporting browsers. (I added the fiddle to the answer) +1

|

Community · Accepted Answer · 2017-05-23 12:14:42Z

6

The input elements have a validity property:

var i = document.getElementsByTagName('input')[0]
i.validity.valid // True or false

console.log(i.validity);

// Logs (when `1` is entered):

 ValidityState
   customError: false
   patternMismatch: false
   rangeOverflow: false
   rangeUnderflow: false
   stepMismatch: false
   tooLong: false
   typeMismatch: false
   valid: true
   valueMissing: false

For more detailed info I'm not going to copy, check Florian Margaine 's answer

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jan 29, 2013 at 15:01

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

4 Comments

Cerbrus Over a year ago

Could the person that downvoted me please tell me why? If I made a mistake, I'd like to learn from it. Honestly, -2?, What's with the downvotes?

Pointy Over a year ago

I didn't downvote, because this is good information, but I think that the property may be "validityState" and not just "validity". edit nope I'm wrong, it's validity :-)

Cerbrus Over a year ago

@Pointy: Google Chrome tells me it's validity. (I always test my code before answering)

Florian Margaine Over a year ago

@Pointy the property is validity, but the constructor object is ValidityState :-)

Collectives™ on Stack Overflow

HTML5 input attributes, access via Javascript?

2 Answers 2

8 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related