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?

javascriptarraysforms

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
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unusual CSS hierarchy observed post AJAX content load

Currently, I am facing a puzzling issue where my CSS rules seem to be losing precedence on a page loaded via AJAX. Despite placing my custom CSS file last in the main page, allowing it to take precedence over any bootstrap styles, after loading new content ...

javascriptcssajax

Issue occurs when using Angular Firebase $createUser method

I'm stuck on this issue. I'm attempting to set up a user with AngularFire using $firebaseAuth instead of the deprecated FirebaseSimpleLogin, as advised in the documentation. I am confident that the form is submitting a valid email and password, b ...

javascriptangularjsfirebaseangularfire

Discovering the destination link of a website while utilizing GM_xmlhttpRequest

Picture yourself browsing a webpage called "www.yourWebsite.com" and utilizing userscripts in Tampermonkey to extract data from another site using the GM_xmlhttpRequest function. As you make requests with the GM_xmlhttpRequest function to visit "exampleWe ...

javascriptuserscriptstampermonkeywindow.locationgm-xmlhttprequest

The function Router.use() is in need of a middleware function, but instead received an undefined

A snippet of code from my index.js file looks like this: ... import userRoutes from './src/routes/userRoutes'; import invoicesRoutes from './src/routes/invoicesRoutes'; import authMiddleware from "./src/middlewares/authMiddleware"; ... ...

javascriptnode.jsexpressmiddleware

Is it secure to transmit Tenant ID's as GET parameters to the API in a Multi-Tenant database environment?

When working with a Multi-Tenant database, is it secure to pass Tenant ID's as query string parameters to the API while using popular JavaScript-based UI platforms like Angular or Vue and ensuring both the site and the API are HTTPS? For example, let ...

javascriptc#angularjsangularvue.js

I encountered an issue with npm run build when attempting to launch a react application on Firebase, resulting in an error

npm ERR! code ENOENT npm ERR! syscall open npm ERR! path C:\Users\Myname\Desktop\god\package.json npm ERR! errno -4058 npm ERR! enoent ENOENT: file 'C:\Users\Myname\Desktop\god\package.json' not f ...

javascriptnpm

Using jQuery to scroll a div element

Having some trouble trying to manipulate the scroll of a div using jQuery. Can't seem to figure out where I'm going wrong. This is the code snippet I am currently working with: $("#CategoryList").animate({ scrollLeft: "=-5" }, "slow"); The ID ...

javascriptjqueryhtml

Utilizing Vue's Getter and Setter to manipulate data within the frontend, rather than relying on the raw values

I am completely new to Vue and finding it difficult to understand why I am facing this issue. Whenever I make a call to my backend in order to fetch some data, the response looks like this: id: Getter & Setter name: Getter & Setter season: Getter ...

javascriptvue.js

Unable to get md-virtual-repeat to work within md-select?

Attempting to use md-select to showcase a large amount of data is causing the browser to freeze upon opening. To address this, I tried implementing md-virtual repeat within md-select for improved performance. However, the code doesn't seem to be funct ...

javascripttypescriptmaterial-designangular-material

External function does not support jQuery types

In my theme.js file, I currently have the following code: jQuery(function ($) { accordion($) }) const accordion = ($) => ... By placing the accordion function directly into the jQuery function, Typescript is able to assist with the installed jquery ...

javascriptjquerytypescript

What is the best approach to simultaneously update an array using multiple threads in a Node.js environment?

Hey there, I'm trying to figure out how to make changes to the same array using 2 worker threads in Node.js. Can anyone help me with this? My issue is that when I add a value in worker thread 1 and then try to access it in worker thread 2, the second ...

javascriptnode.jsmultithreadingworker-thread

Illumination scope for directional lights in three.js

In the world of three.js, calculating shadows for directional lights involves setting a range based on a bounding box that extends from the light source. This means that if I want to limit how far shadows are rendered, I need to adjust the bounding box geo ...

javascriptthree.js

Customize the dynamic options for selecting with Bootstrap

I have been experimenting with the bootstrap select plugin and have run into an issue while trying to dynamically add options using Javascript. Unfortunately, the list always appears empty. Interestingly, when I revert back to using a conventional HTML sel ...

javascriptjqueryhtmltwitter-bootstrap

Once the Ionic platform is prepared, retrieve from the Angular factory

I have created a firebase Auth factory that looks like this: app.factory("Auth", ["$firebaseAuth", "FIREBASE_URL","$ionicPlatform", function($firebaseAuth, FIREBASE_URL, $ionicPlatform) { var auth = {}; $ionicPlatform.ready(function(){ ...

javascriptangularjsionic-frameworkfirebase

Rendering Local HTML with local styling and scripts in React Native Webview

I am having trouble loading a local HTML, CSS, and JS file in my React Native webview. The CSS is not being applied to the HTML. Here is my folder structure: My HTML file, along with CSS, images, and JS file are all placed in the following app folder stru ...

javascripthtmlcssreact-nativewebview

Troubleshooting: AngularJS filter is not functioning properly in combination with jQuery

I have a collection of items stored in the variable $scope. I have connected these items to jQuery events and added an input field for filtering. Everything is functioning properly. However, when I enter text into the input field, the filtered out items r ...

javascriptjqueryangularjsangularjs-filter

Exploring the method of extracting link text with jQuery

Is there a way to extract link text using jQuery? Here is the link: <a href="https://www.google.com" id="id1">google site</a> I am looking to retrieve the text "google site" using jQuery. ...

javascriptjquery

Is there a way to retrieve an array from Postman and have it displayed in the format [1, 2,

I am currently working on a REST API and I need to pass an array like [1,2,3] The course should be returned in $request->course When I run a foreach loop, it displays: foreach ($request->course as $key => $value) { echo $value;d ...

phparraysforeachpostman

Error: Attempting to append a child to a non-existent property

I am currently learning Java Script and this is the code I have been working on. <!doctype html> <html> <head> <style> div {position:absolute; width:500px; height:500px} img {position:absolute} ...

javascripthtmldom

What significance does it hold when an unhandled rejection event lacks a reason field?

Our app tracks client-side errors using Rollbar, but we keep encountering a not very helpful error message from Safari and Chrome: [unhandledrejection] error getting `reason` from event Upon investigation, I found that this message is generated by Rollbar ...

javascriptnode.jsrollbar