Jquery/Javascript check input fields on keyboard touch

Question

I've been googling to get an answer, but i couldn't find what i want. Not sure if i typed my question wrong, but i'll try to explain.

What i'm looking to achieve is : Once the user types, i want my script to run, so my button enables when the 2 passwords are equal to eachother. As soon as the passwords are equal to eachother, the button will be enabled. If not, the button will be disabled.

function test123() {
       var pw1 = $('#pw1').val();
       var pw2 = $('#pw2').val();

       if (pw1 == pw2) {
             console.log('Valid!');
         } else {
             console.log('Not valid!');
         }

         }

<div id='register-div'>
       <form method='POST' action='javascript:test123()'>
           <input name='username' type='text' placeholder='username'>
           <input id='pw1' name='password' type='password' placeholder='password'>
           <input id='pw2' name='password2' type='password' 
           placeholder='password_again'>
           <button type='submit'><a> REGISTER </a></button>
   </form>
   </div>

I've got that figured out, my question is, how do i run a function when a key is pressed? — Hendry, May 02 '17 at 07:31

score 5 · Answer 1 · answered May 02 '17 at 07:35

To achieve this you can bind an input event to the password fields using unobtrusive JS. You can then enable/disable the button if the values match using prop('disabled'), like this:

$('#pw1, #pw2').on('input', function() {
  var pw1 = $('#pw1').val();
  var pw2 = $('#pw2').val();

  $('button').prop('disabled', pw1 != pw2);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="register-div">
  <form method="POST">
    <input name="username" type="text" placeholder="username">
    <input id="pw1" name="password" type="password" placeholder="password">
    <input id="pw2" name="password2" type="password" placeholder="password_again">
    <button type="submit" disabled="true">REGISTER</button>
  </form>
</div>

Also note that I removed the <a> element you placed inside the <button>, as that is not valid HTML.

score 3 · Answer 2 · answered May 02 '17 at 07:34

3

    $('#pw1,#pw2').keyup( function() {
    test123();
});
    function test123() {
           var pw1 = $('#pw1').val(),
             pw2 = $('#pw2').val();

           if (pw1 == pw2) {
                $('button').prop('disabled',false)
             } else {
                $('button').prop('disabled',true)
             }

             }

answered May 02 '17 at 07:34

RemyaJ

5,358
4
22
41

Just to add - It is better to bind on 'input' event than 'keyup' in this case so we prevent not needed firing when 'dummy' buttons are pressed and eventually capture clipboard pastes not done via buttons. – Samuil Petrov May 02 '17 at 07:37

score 1 · Answer 3 · answered May 02 '17 at 07:35

Check this code:

function test123() {
       var pw1 = $('#pw1').val();
       var pw2 = $('#pw2').val();

       if (pw1 == pw2) {
             document.getElementById("submit_btn").disabled = false;  
         } else {
             document.getElementById("submit_btn").disabled = true;  
         }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='register-div'>
       <form method='POST' action='javascript:test123()'>
           <input name='username' type='text' placeholder='username'>
           <input id='pw1' name='password' type='password' placeholder='password'>
           <input id='pw2' name='password2' type='password' 
           placeholder='password_again' onkeyup='test123()'>
           <button type='submit' id='submit_btn' disabled><a> REGISTER </a></button>
   </form>
   </div>

score 0 · Answer 4 · answered May 02 '17 at 07:38

$('button').prop('disabled', true)
$('input.pass').on('input', function() {
  var pw1 = $('#pw1').val()
  var pw2 = $('#pw2').val()
  if (pw1 == pw2) {
    $('button').prop('disabled', false)
  } else {
    $('button').prop('disabled', true)
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='register-div'>
  <form method='POST' action='javascript:test123()'>
    <input name='username' type='text' placeholder='username'>
    <input class="pass" id='pw1' name='password' type='password' placeholder='password'>
    <input class="pass" id='pw2' name='password2' type='password' placeholder='password_again'>
    <button type='submit'><a> REGISTER </a></button>
  </form>
</div>

Add event handler on the input with same class pass
Use event input

score 0 · Answer 5 · answered May 02 '17 at 07:45

function test123() {
   var pw1 = $('#pw1').val();
   var pw2 = $('#pw2').val();
   if (pw1 == pw2) {
  $('button').prop('disabled',false)
   } else {
   $('button').prop('disabled',true)
   }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id='register-div'>
 <form method='POST' action=''>
  <input name='username' type='text' placeholder='username'>
  <input id='pw1' onkeyup="return test123();" name='password' type='password' placeholder='password'>
  <input id='pw2' onkeyup="return test123();" name='password2' type='password' placeholder='password_again'>
  <button disabled type='submit'><a> REGISTER </a></button>
 </form>
</div>

score 0 · Answer 6 · answered May 02 '17 at 08:23

0

Simple...you can use onkeypress event

https://www.w3schools.com/jsref/event_onkeypress.asp

answered May 02 '17 at 08:23

aasim bairagdar

292
1
4
8

Jquery/Javascript check input fields on keyboard touch

6 Answers6