javascript display error message in innerHTML if passwords do not match

Question

javascript display error message in innerHTML if passwords do not match

Hello, I found your code to be helpful but I am facing an issue. I want to display a message using innerHTML when the passwords do not match. I have been trying to implement this feature but it is not working for me. Below is my current code. Please provide guidance as I am still learning.

if (pwd != cpwd) {
    document.getElementById("pwd").innerHTML = "Password must match";
    document.getElementById("cpwd").innerHTML = "Password must match";
    document.getElementById("pwd").style.color = "RED";

    return false;
}

I would like to understand how to correctly use innerHTML.

Your code snippet:

<input id="pass1" type="password" placeholder="Password" style="border-radius:7px; border:2px solid #dadada;" /> <br />
<input id="pass2" type="password" placeholder="Confirm Password" style="border-radius:7px; border:2px solid #dadada;"/> <br />

<script>
function myFunction() {
    var pass1 = document.getElementById("pass1").value;
    var pass2 = document.getElementById("pass2").value;
    if (pass1 != pass2) {
        document.getElementById("pass1").style.borderColor = "#E34234";
        document.getElementById("pass2").style.borderColor = "#E34234";
    }
    else {
        alert("Passwords Match!!!");
    }
}
</script>

Submit

Thanks in advance for your support and looking forward to your response.

javascript

Answer 1

Answer №1

In order to activate the initial code snippet linked to your inquiry, it is recommended that you employ the onBlur event associated with the "pass2" field.

Here's an illustration:

document.getElementById("pass2").onblur=function(){
    var pass1 = document.getElementById("pass1").value;
    var pass2 = document.getElementById("pass2").value;
    if (pass1 != pass2) {
      document.getElementById("pass1").innerHTML="Passwords must match";
      document.getElementById("pass2").innerHTML="Passwords must match";
      document.getElementById("pass1").style.color="RED";
      return false;
     }
     return true;    
};

Alternatively, you can link it to the submit button for a different approach.

Answer 2

In order to activate the initial code snippet linked to your inquiry, it is recommended that you employ the onBlur event associated with the "pass2" field.

Here's an illustration:

document.getElementById("pass2").onblur=function(){
    var pass1 = document.getElementById("pass1").value;
    var pass2 = document.getElementById("pass2").value;
    if (pass1 != pass2) {
      document.getElementById("pass1").innerHTML="Passwords must match";
      document.getElementById("pass2").innerHTML="Passwords must match";
      document.getElementById("pass1").style.color="RED";
      return false;
     }
     return true;    
};

Alternatively, you can link it to the submit button for a different approach.

Answer 3

Answer №2

To implement password validation, create a new div element in the document to hold the validation response. Here's an example of how you can do this:

<div id='passwordValidation'></div>

. Once you've compared the entered passwords and determined whether they match or not, update the content of this div with the appropriate message using JavaScript like so:

document.getElementById('passwordValidation').innerHTML = "The passwords entered do not match!";

Answer 4

To implement password validation, create a new div element in the document to hold the validation response. Here's an example of how you can do this:

<div id='passwordValidation'></div>

. Once you've compared the entered passwords and determined whether they match or not, update the content of this div with the appropriate message using JavaScript like so:

document.getElementById('passwordValidation').innerHTML = "The passwords entered do not match!";

javascript display error message in innerHTML if passwords do not match

Answer №1

Answer №2

Similar questions

What is the best way to connect these functions in a sequence using promises?

Firebase has flagged the Google Authentication process with a message stating: Entry denied: The request made by this application

ReactJS: error occurs when trying to fetch data and encountering issues with reading properties

Is there a specific method for organizing cached buffer conversions in Node.js for optimal efficiency?

"NextAuth encounters an issue while trying to fetch the API endpoint: req.body

Using Jquery to locate the next div element

What is the best way to save geolocation coordinates in a Javascript array?

Is there a way to display a div element just once in AngularJS?

jPlayer - Utilize the setMedia() function to define the media source URL

Navigating the Spine

npm build issues stemming from browserlist configurations

Previewing posts on a single page can be done by following a few

Table header containing the weekdays for a jQuery calendar display

What steps should be taken to address the Chrome alert stating that the deferred DOM Node cannot be identified as a valid node?

Error message stating: "Node.js 'readline' - Mark-compacts near heap limit are not effective. Allocation failed."

Attempting to retrieve an array within a Mustache JavaScript template

What is the best way to determine the index of the area that was clicked on in chartjs?

Enhancing audio control features using HTML and JavaScript

Error encountered while compiling NextJS: Unexpected use of single quotation mark in jsx-quotes

Switching from a click event to a hover event in JavaScript