CODEWITHSUNDEEP
javascript
Manish Pandey
Manish Pandey

Reputation: 7

validate two input field using onkeypress event

I am trying to validate two input field on onkeypress event but when i am entering same value in both the field i am getting wrong message. i tried to run the same code using onclick event and it was successful.

var a = document.getElementById("txt1");
var b = document.getElementById("txt2");

function myFun() {
  if (a.value != b.value) {
    document.getElementById("msg2").innerHTML = "<span style='color:red'>Did not match please recheck it</span>";

  } else if (a.value == b.value) {
    alert(a.value);
    document.getElementById("msg2").innerHTML = "<span style='color:green'>match please recheck it</span>";

  }
}
<h2>My First JavaScript</h2>
<input type="text" id="txt1">
<p id="msg1"></p>
<input type="text" id="txt2" onkeypress="myFun()">
<p id="msg2"></p>
<input type="button" value="click">
<p id="demo"></p>

Please help me solve this. its showing me wrong message even though value of both the filed is same

Upvotes: 0

Views: 1205

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65796

keypress is not the correct event to use here because it fires as you are pressing a key (but before the character has been placed into the element) and it has been deprecated. Use keyup, which fires after the character has been placed into the field, instead.

<!DOCTYPE html>
    <html>
    <body>
    
    <h2>My First JavaScript</h2>
    
    <input type="text" id="txt1" >
    <p id="msg1"></p>
    <input type="text" id="txt2" onkeyup="myFun()">
    <p id="msg2"></p>
    <input type="button" value="click" >
    <script>
      var a = document.getElementById("txt1");
      var b = document.getElementById("txt2");
       
        function myFun() {
         if(a.value != b.value) {
            document.getElementById("msg2").innerHTML = "<span style='color:red'>Did not match please recheck it</span>";
          } else if(a.value == b.value) {
            alert(a.value);
            document.getElementById("msg2").innerHTML = "<span style='color:green'>match please recheck it</span>"; 
          }
       }
    </script>
    </body>
    </html>

Additionally, you don't need else if here and can just use else because if the first test fails, then the two values must be equal.

Also, don't use .innerHTML if you can avoid it as there are performance and security issues to be concerned with. Instead, just set the text of a pre-existing HTML element with .textContent.

Lastly, instead of using inline event handlers and inline styles, separate your HTML, CSS, and JavaScript. Here's how that would look:

.valid { color:green; }
.invalid { color:red; }
<!DOCTYPE html>
    <html>
    <body>
    
    <h2>My First JavaScript</h2>
    
    <input type="text" id="txt1"><br>
    <input type="text" id="txt2">
    <p id="msg"></p>
    <input type="button" value="click" >
    <script>
      // Get your DOM references just once:
      var a = document.getElementById("txt1");
      var b = document.getElementById("txt2");
      var msg = document.getElementById("msg");
      
      // Set up your event handlers in JavaScript, not HTML
      b.addEventListener("keyup", myFun);
       
        function myFun() {
        if(a.value != b.value) {
            msg.textContent = "Did not match please recheck it";
            msg.classList.add("invalid");  // Apply pre-existing CSS class
            msg.classList.remove("valid"); // Remove pre-existing CSS class
          } else {
            msg.textContent = "match!"; 
            msg.classList.add("valid");    // Apply pre-existing CSS class  
            msg.classList.remove("invalid"); // Remove pre-existing CSS class            
          }
       }
    </script>
    </body>
    </html>

Upvotes: 4

Farooq Ahmed Khan
Farooq Ahmed Khan

Reputation: 4094

Use onkeyup instead of onkeypress to capture the latest value in field.

Reference

var a = document.getElementById("txt1");
var b = document.getElementById("txt2");

function myFun() {
  if (a.value != b.value) {
    document.getElementById("msg2").innerHTML = "<span style='color:red'>Did not match please recheck it</span>";

  } else if (a.value == b.value) {
    alert(a.value);
    document.getElementById("msg2").innerHTML = "<span style='color:green'>match please recheck it</span>";

  }
}
<h2>My First JavaScript</h2>
<input type="text" id="txt1">
<p id="msg1"></p>
<input type="text" id="txt2" onkeyup="myFun()">
<p id="msg2"></p>
<input type="button" value="click">
<p id="demo"></p>

Upvotes: 0

Related Questions