Another method to verify an input using HTML5 regex and JavaScript

Question

Another method to verify an input using HTML5 regex and JavaScript

When working with vanilla JavaScript to check an HTML input against a regex pattern, things can get tricky. I find myself going back to the parent element to validate the input, and while it works, it's not as elegant as I would like it to be.

Here is the JavaScript code:

input.parentNode.querySelector(':valid')

And here is the HTML input that is being validated:

<input type="tel" id="fos_user_registration_form_mobileNumber" name="fos_user_registration_form[mobileNumber]" required="required" pattern="^0[0|1|2|3|4|5|6|7|9]\d{8}$" maxlength="10">

But is there a better way to achieve this validation?

javascript arrays forms

Answer 1

Answer №1

If you're searching for the validity property, then look no further:

The getter for the validity attribute will retrieve a ValidityState object that indicates the various validity states of the element. This object is dynamic and constantly updating.

One key state within this object is the boolean valid flag:

If (input.validity.valid) {
    // Element is valid
} else {
    // Element is not valid
}

You can also use matches:

If (input.matches(":valid")) {
    // Element is valid
} else {
    // Element is not valid
}

Answer 2

If you're searching for the validity property, then look no further:

The getter for the validity attribute will retrieve a ValidityState object that indicates the various validity states of the element. This object is dynamic and constantly updating.

One key state within this object is the boolean valid flag:

If (input.validity.valid) {
    // Element is valid
} else {
    // Element is not valid
}

You can also use matches:

If (input.matches(":valid")) {
    // Element is valid
} else {
    // Element is not valid
}

Another method to verify an input using HTML5 regex and JavaScript

Answer №1

Similar questions

Experimenting with code within a window event listener function

Utilizing JQuery to make Google listings easily findable

Hiding a parent DIV in JS based on specific content: Here's how

My AJAX request seems to be redirecting to my PHP file instead of simply returning the response text. What could be causing this issue?

A guide to retrieving data in React with useSWR whenever the state changes

Retrieve the body's coordinates when dragging an element using the jQuery UI library

Master the Art of Transforming an Array into a Variable

Tips for sending information from PHP to an AJAX function

Using Vue's $emit method within a Promise

Guide to utilizing an if statement to return a string as the title in a Tooltip pro

Tips for Sending <Div> Data to a Servlet

Utilizing AngularJS to create a vertical calendar

Mocha avoids running the test

Add into clickhouse JSONEachRow with nested data structure

Exploring client-server relationships within the Express framework

Executing a JavaScript Function in the Background using Cordova

[filepond] in order to enroll using the serverId value received from the server

What are the steps for incorporating React into an existing website?

A guide to accessing array elements (JSON) in Angular

Looping through nested arrays in an array of objects with Angular's ng-repeat