Kamran
Kamran

Reputation: 371

Use of Key Up event in Jquery

I want to validate my textbox using jquery.

If the number of letters' length increased to 6, it will hide my <span> tag

html:

<input type="password" id="txtpass" value="" onkeyup="KeyUp();"/>

javascript:

function KeyUp () {        
    var x =$("#txtpass").val();
    if (x.length < 6) {
        $("span").show()
    }
    else 
        (x.length >= 6)
    {
        $("span").hide();
    }
}

Advise please

Upvotes: 0

Views: 35

Answers (2)

fuyushimoya
fuyushimoya

Reputation: 9813

You can validate the password's length by keyup or input event:

    $('#txtpass2').on('blur', function() {
      var shouldShowAlert = ($(this).val().length < 6);
      $("#passAlert2").toggle(shouldShowAlert);
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
use oninput<input type="password" id="txtpass" value="" oninput="validatePass(this)"/>
<span id='passAlert'>Length is too short</span>
<script>
  function validatePass(target) {
    var shouldShowAlert = (target.value.length < 6);
    $("#passAlert").toggle(shouldShowAlert);
  }
</script>
<br/>
use onblur<input type="password" id="txtpass2" value=""/>
<span id='passAlert2' style="display: none;">Length is too short</span>

Below is jquery way:

$('#txtpass').on('input', function() {
  var shouldShowAlert = ($(this).val().length < 6);
  $("#passAlert").toggle(shouldShowAlert);
});

Upvotes: 0

Zaki
Zaki

Reputation: 5600

Use keyup function of jquery and look for length and show/hide (or use toggle):

$('#txtpass').keyup(function(){
    if($(this).val().length < 6){
        $("span").show();
    }
    else if($(this).val().length >= 6){
       $("span").hide();
    }
});

Upvotes: 1

Related Questions