Jquery: check if variable is defined after keyup() function

Question

Am creating register form with jquery function keyup(), for example if input is correct I assign it to a txtuname variable,then I press register button and I need to know that all form variables are correct and defined.Code below is not working:

<script type="text/javascript">      
$("document").ready(function() {
  $("#txtuname").keyup(function() {
    if ($("#txtuname").val().length < 6) {
      jQuery("label[for='txtuname']").text("user name is too short");
    }
    if ($("#txtuname").val().length >= 6) {
      var txtuname = $("#txtuname").val();
      jQuery("label[for='txtuname']").text("");
    }
  });
  $("#submitRegistration").click(function() {
    if (typeof txtuname == 'defined') {
      alert("defined");
    }
    if (typeof txtuname == 'undefined') {
      alert("undefined");
    }
  });
});
</script>

`typeof txtuname =='defined'` change to `typeof txtuname = "string"` — xAqweRx, May 26 '16 at 12:02
`typeof txtuname =='undefined'` change to `undefined === txtuname ` — xAqweRx, May 26 '16 at 12:03

xAqweRx · Answer 1 · 2016-05-26T12:20:37.577

Modified code. Main point of this code is that txtuname should be visible in both scopes of keyup event listner and click listner. So if there are more lements, create Validation object and just check whether all the values was set and correct. And yes, use or $ or jQuery in your code.

$("document").ready(function(){

    var txtuname = null;

    $("#txtuname").keyup(function(){
        if($("#txtuname").val().length<6){
            jQuery("label[for='txtuname']").text("user name is too short");
        }

        if($("#txtuname").val().length>=6){
            txtuname=$("#txtuname").val();
            jQuery("label[for='txtuname']").text("");
        }
    });

    $("#submitRegistration").click(function(){
        if( txtuname == null || txtuname.length < 6)  ){
            alert("incorrect");
        }
        else{
            alert("correct");
        }

    });
});

Updated check of variable using comment of @Rhumborl , thx

I would just set it to `null` on initialization and when invalid, then just check `if(txtuname === null)`, rather than duplicating logic — Rhumborl, May 26 '16 at 12:11

score 1 · Answer 2 · answered May 26 '16 at 12:23

1

Replace code with below condition -

if( typeof txtuname !== 'undefined' && txtuname.length >= 6)  ){
  //proceed further
}else{
   alert('Please correct entries.');
   return false;
}

answered May 26 '16 at 12:23

Sarang Patel

31
5

Mark Schultheiss · Answer 3 · 2016-05-26T12:56:06.163

1

I would put the validation logic in a function and call that, you can update this with your specific requirements and only do it once:

function isValidName(field) {
  var myName = field.val().trim();
  // some of this is redundant but just to show possibilities
  var isValid = myName.length && myName.length >= 6 && myName && undefined !== myName && myName != " ";
  var myLabel = $("label[for='" + field.attr('id') + "']");
  if (isValid) {
    myLabel.text("");
  } else {
    myLabel.text("user name is too short");
  }
  return isValid;
}
$("document").ready(function() {
  $("#txtuname").keyup(function() {
    isValidName($(this));
  });
  $("#submitRegistration").click(function() {
    var nameIsValid = isValidName($("#txtuname"));
    if (nameIsValid) {
      alert("valid");
    } else {
      alert("undefined or invalid");
    }
  });
});

edited May 26 '16 at 12:56

answered May 26 '16 at 12:50

Mark Schultheiss

32,614
12
69
100

I think there are problem with this `undefined !== myName`, because everytime it gives me an answer user name is too short, if I delete `undefined !== myName` from conditions, then it works. – Darius92 May 26 '16 at 13:13
That should have the same effect as `(typeof myName !== "undefined")` unless undefined as been altered manually which is possible. – Mark Schultheiss May 29 '16 at 00:52

score 0 · Answer 4 · answered May 26 '16 at 12:19

You are using $ as well as jQuery window.jQuery object in your code. Do not use both at time , you can check by both

jQuery("document").ready(function() { jQuery("#txtuname").keyup(function(){ if(jQuery("#txtuname").val().length<6){

    jQuery("label[for='txtuname']").text("user name is too short");
}

if(jQuery("#txtuname").val().length>=6){

var txtuname=jQuery("#txtuname").val();
jQuery("label[for='txtuname']").text("");

}
});

jQuery("#submitRegistration").click(function(){

if(typeof txtuname =='defined'){
    alert("defined");
}
if(typeof txtuname =='undefined'){
    alert("undefined");
}

});
});

Or use by replace jQuery by $ sign. It will work.

score 0 · Answer 5 · answered May 26 '16 at 12:23

you can try this way too......

$("document").ready(function(){

var txtuname;

$("#txtuname").keyup(function(){
    if($("#txtuname").val().length<6){
        jQuery("label[for='txtuname']").text("user name is too short");
    }

    if($("#txtuname").val().length>=6){
        txtuname=$("#txtuname").val();
        jQuery("label[for='txtuname']").text("");
    }
});

$("#submitRegistration").click(function(){
    if(typeof txtuname=="undefined"){
        alert("undefined");
    }
    else{
        alert("defined");
    }
});
});

Jquery: check if variable is defined after keyup() function

5 Answers5