Is it possible to dynamically set the pattern attribute of a form input to correspond with the value entered in another input within the same form?

Question

Is it possible to dynamically set the pattern attribute of a form input to correspond with the value entered in another input within the same form?

The issue at hand is pretty straightforward - I have a form with the usual email setup: an Email input along with a Confirm Email input, where the values must match for validation.

I'm curious if it's possible to dynamically set the pattern attribute on the Confirm Email input to be a regex pattern that corresponds to whatever the user types into the initial Email field during keyup or focusout events. Is this concept clear and feasible?

I can handle creating the event listeners for keyup/focusout, but I'm uncertain about crafting a suitable regex for this scenario, and whether dynamically generating the pattern attribute in this manner would actually work as intended.

Lastly, please refrain from suggesting jquery solutions, as my current project requires vanilla JavaScript implementation. ES6, typescript, etc. are acceptable alternatives, just not jquery. Thank you in advance!

javascript regex typescript forms input

Answer 1

Answer №1

It's important to note that a regex can simply be a standard string, making it quite straightforward. If you restrict illegal characters in the email input, there is no need to escape any characters for the regex. However, if you were to permit something like [ in the email, you would have to escape it as \[

const i1 = document.getElementById('1');
const i2 = document.getElementById('2');

i1.addEventListener('change', (ev) => {
  i2.setAttribute('pattern', ev.target.value);
});

<form>
  <input id="1" required pattern="[\w\-\+\.]+@[\w\-\+\.]+" title="Email ex. a@b" />
  <br />
  <br />
  <input id="2" required pattern="" title="Match email above"/>
  <br />
  <br />
  <input type="submit" />
</form>

The email regex provided seems sufficient, as it verifies the presence of an @ symbol and ensures no illegal characters are included. For thorough validation of emails, sending a confirmation link is recommended.

To understand the complexity of validating emails with a regex, refer to this discussion thread: How can I validate an email address using a regular expression?

Answer 2

It's important to note that a regex can simply be a standard string, making it quite straightforward. If you restrict illegal characters in the email input, there is no need to escape any characters for the regex. However, if you were to permit something like [ in the email, you would have to escape it as \[

const i1 = document.getElementById('1');
const i2 = document.getElementById('2');

i1.addEventListener('change', (ev) => {
  i2.setAttribute('pattern', ev.target.value);
});

<form>
  <input id="1" required pattern="[\w\-\+\.]+@[\w\-\+\.]+" title="Email ex. a@b" />
  <br />
  <br />
  <input id="2" required pattern="" title="Match email above"/>
  <br />
  <br />
  <input type="submit" />
</form>

The email regex provided seems sufficient, as it verifies the presence of an @ symbol and ensures no illegal characters are included. For thorough validation of emails, sending a confirmation link is recommended.

To understand the complexity of validating emails with a regex, refer to this discussion thread: How can I validate an email address using a regular expression?

Is it possible to dynamically set the pattern attribute of a form input to correspond with the value entered in another input within the same form?

Answer №1

Similar questions

How to Eliminate the Hashtag from the URL in AngularJS Version 1.x

Exploring the world of JMeter: capturing sessions with JavaScript and jQuery

Using TypeScript to import a Vue 2 component into a Vue 3 application

Tips for preventing the need to input letters into a date selector field

What is the best way to send the selected option from a dropdown to a button click function within the controller?

Parsing XML to JSON using JavaScript

What is the best way to transform data from a single form into a JSON array?

Is there a TypeScript equivalent to C#'s generic type constraint that allows for extending a class?

Retrieve JavaScript functions as JSON or text in AngularJS and execute them

Sending SMS from an Angular application to mobile devices can be achieved through several methods

Whenever a user tries to retrieve a page using ajax and then proceeds to submit the form associated with that page, they encounter

Preserving drop-down options in Ngx-Bootstrap Typeahead even after input is cleared

Exploring the possibilities of Vue.js and Bootstrap 4 on the PlayStation 4 internet browser

One limitation is that you cannot use JQuery to make multiple rows editable simultaneously

A guide on creating a clickable button using react-router-dom's Link component in Material-UI version 5

"Encountering a problem with Typescript when working with arrays

Sending information from React JS to MongoDB

React Ant Design: Encountered a warning for 2 elements having non-unique properties

Exploring the wonders of HTTP requests through pure pipes in Angular 5

Manipulate JavaScript programmatically using Python and Selenium