Tips for indicating when the password confirmation field <input type="password">ConfirmationPassword</input> is considered valid, which occurs when it matches the original password input

I've hit a roadblock here. I just can't figure out how to manipulate JS and bypass validation.

I want to trigger this - onkeyup when <input2 pwd> matches <input pwd>

.l_input:valid + span::after {
position: absolute;
content: '✓';
color: #009000;
font-size: 1vw;}

And here's my awesome JS function

var check = function() {
  if (document.getElementById('password').value == document.getElementById('c_password').value) {
      document.getElementById('validity').is(':valid'); //FORCE :VALID
  } else {document.getElementById('validity').is(':invalid');   // :INVALID 
}}  // 'validity' is span

Currently, CSS triggers after any symbol (because it doesn't have a pattern)

HTML:

<input onkeyup="check()" type=password id=password placeholder='Password'>
<input onkeyup="check()" type=password id=c_password placeholder='Confirmation Password'>
javascripthtmljquerycss

Answer №1

SOLUTION:

function validatePassword() {
            if (document.getElementById('password').value == document.getElementById('confirm_password').value) {
                document.getElementById('confirm_password').setCustomValidity('');
            } else {document.getElementById('confirm_password').setCustomValidity('Passwords do not match');   }
            }

This JavaScript function ensures that 

document.getElementById('confirm_password') <INPUT>
is only valid when I specify.

This approach also controls the styling using CSS :valid // :invalid based on my requirements.

This method results in less code by just adding a few extra lines of code.

IMPORTANT REMINDER!

setCustomValidity('') // no message = valid
setCustomValidity('Passwords do not match') // message displayed to user

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

Border Gap Issue in Internet Explorer

There seems to be an issue with borders in Internet Explorer, as shown here. When opening this page in IE 9, you may notice artifacts appearing around the left corners of the Welcome box. These artifacts seem to move when hovering over them. If I switch t ...

cssinternet-explorer-9twitter-bootstrapborder

Tips for utilizing Selenium to acquire links from a webpage

Is it possible to retrieve the link location of a web element in Selenium? While we can easily obtain the text from a web element and use getAttribute("href") method to get the location of a hyperlink, my need is to extract all the links present. For insta ...

javascriptjqueryhtmlseleniumselenium-webdriver

Is it possible to accurately measure the width of elements down to the partial pixel level?

This dilemma has been causing me frustration for quite some time. My goal is to achieve a simple task - float li elements in a ul container and give them a hover effect. Here's the code snippet: Everything seems to be in order, with all CSS reset, dis ...

javascriptjqueryhtmlcss

Error occurred when trying to set the method in the Magento checkout: Uncaught TypeError - Unable to access the 'style' property of null

After deciding to move my Magento 1.3 template to Magento 1.9, I anticipate encountering a lot of minor issues. However, one specific problem has left me stumped. The issue arises when I am in the on-page checkout process and opt to make a purchase as a g ...

javascriptjquerymagentoprototype

Combining and consolidating JSON attributes

I am working with a JSON object that has multiple instances of the email property, like so: accounts": [ { "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61120e0c04030e051821050e0c">[email protected]</a& ...

javascriptjqueryjsongrouping

What is the reason behind the for of loop breaking within an async function instead of properly awaiting the execution?

Update 2: I made changes to use setTimeOut instead, which fixed the issue. Check out the accepted answer for details on what was causing the error. The code below is now functioning properly. async function getSlices() { const imgBuffs = await sliceImg ...

javascriptnode.jsasync-await

Sharing a const object across different pages in React

I have implemented this code snippet to translate the content on my website. Is there a more efficient way to apply this translation functionality without having to manually copy and paste the code across multiple pages? import SampleSection from ". ...

javascriptreactjsnext.jsinternationalizationchakra-ui

Take action once the Promise outside of the then block has been successfully completed

Presented below is the code snippet: function getPromise():Promise<any> { let p = new Promise<any>((resolve, reject) => { //some logical resolve(data); }); p.finally(()=>{ //I want do something when ou ...

javascripttypescriptpromise

Managing checkbox validation in Formik with React and Material UI

I am currently working on implementing Checkbox validation for an "Accept Terms of Service" checkbox using React and Material UI. Here is what I have done so far: Validation Schema const validationSchema = yup.object().shape({ email: yup .string() ...

javascriptreactjsmaterial-uiformik

"Encountered an error while trying to fetch a PHP file using AngularJS $http.get - Error message

I am currently working with the file api.php which fetches necessary data from a database. require_once 'db.php'; $con = mysql_connect($host,$user,$pass); $dbs = mysql_select_db($databaseName, $con); $query=mysql_query("SELECT * FROM $tableName" ...

javascriptphpangularjs

Looking for help combining HTML5 Canvas and JavaScript to showcase images. Can anyone lend a hand?

I am currently in the process of developing an Android game using HTML5 and Javascript. I have managed to make some progress, but I have encountered a problem that has left me puzzled. Initially, my JS file and Html file were functioning well together for ...

javascriptandroidhtmlhtml5-canvas

Is there a plugin available for printing the content of a jQuery dialog box?

I'm still learning jQuery UI and was wondering if there is a plugin available for printing just the content of a jQuery dialog, without printing the entire webpage? Thank you. ...

jqueryjquery-uijquery-dialog

Utilizing Sequelize to Convert and Cast Data in iLike Queries

When using Sequelize for a full-text search, I encountered an issue with applying the iLike operator to columns of INTEGER or DATE type. How can I cast off a column in this case? To illustrate, here is an example of what I am trying to achieve with a Post ...

javascriptnode.jspostgresqlsequelize.js

Reconfigure the code to process object data instead of an array in JavaScript

Recently, I wrote a piece of code that is capable of exporting data into a CSV file. The data format it reads is structured as follows: var data = [ ['one', 'one is the first'], ['two', 'two is the second'], ...

javascript

Incorrect Configuration of Angular Testing Module Leads to Failure in Resolving Parameters (NgRx)

Struggling with setting up tests in my Angular CLI 6 project. Here's a snippet from my testing code: beforeEach(() => { spyOn(console, 'info'); TestBed.configureTestingModule({ providers: [ ConsoleLoggerEffects, prov ...

javascriptangulartypescriptngrx

The relatedTarget property of the Event object is always set to undefined

Within Bootstrap events, we have access to event.relatedTarget in the various available events. For example, I am utilizing shown.bs.modal. Normally, event.relatedTarget holds the button object from where we click and activate the modal using an onclick ev ...

javascriptjquerytwitter-bootstrap-3bootstrap-modal

Determining the browser width's pixel value to enhance responsiveness in design

Lately, I've been delving into the world of responsive design and trying to grasp the most effective strategies. From what I've gathered, focusing on content-driven breakpoints rather than device-specific ones is key. One thing that would greatl ...

javascripthtmlcssresponsive-design

Encountered problem parsing JSON with jQuery 1.9, though no issues were found when using eval

On the server side of my application, I have overridden java.Object.toString() to extract JSON without relying on any JSON library. The software versions in play are as follows: jQuery 1.9.0 and JDK 1.6.21 var jqxhr = $.ajax(url:"/getAvailableAddress.do" ...

javajsonjquery

A method for adding a strikethrough to text within a list item upon clicking a button

Hi there! I'm just starting out with JS, HTML, and CSS and I could really use some help. I've been researching solutions but I'm struggling to apply them to my specific situation. I'm trying to add an onClick function to Button 2 and im ...

javascripthtmlcss

Navigator Access - Handlebars

I'm currently making changes to the Ghost blog in order to support multiple languages. To achieve this, I am creating a Handlebars helper: hbs.registerHelper("language", function () { var lang = (navigator.language) ? navigator.language : nav ...

javascriptnode.jsexpresshandlebars.jsghost-blog