Textfield.val() fails condition check

Functionality:

User will scan their ID with a scanner and the value of their ID will be displayed in the textfield. There are a couple of check conditions when the ID is scanned and they are:

1.) Check the first character of the ID value, if the character is equal to the first character, it will perform second condition check else, an error page will be displayed

2.) Check the length of the ID value, if length of ID value is equal to stated length, it will navigate to the next page, else an error page will be displayed.

Issue:

I am able to satisfy the first condition check where it is able to check on the first character of the ID input.

However, I am encountering this issue whereby it will always fail the second condition(whether it passes the first condition or fail the first condition). The behaviour that I am encountering is:

-> The moment I enter the first character that passes the first condition(checking that the first character tallies with stated first character checks)or even if the first character does not match with the first condition, it will always fail the second condition(is not equal to the stated ID length). Hence, it does not wait for the full and final length of the ID to be scanned finish before the length check is done.

Hence, I would need to ask how is it possible to check for the second condition only after the entire ID value has been scanned and not that the second condition is checked even before the ID value is fully scanned.

Code:

/*================= SCAN:Citizen OR PR ID BARCODE===================================================================================================*/
$("#NRICCodeField").on("input", function(e) {


  /*===Slice and Grab the First Character of the ID captured===*/
  var ID_First_Character = $("#NRICCodeField").val().slice(0, 1);

  console.log("ID_First_Character:" + ID_First_Character);

  console.log("NRICCodeField:" + NRICCodeField);

  /*==============Check for  First character if it is Citizen ==> S/T or FIN ==> F/G: if is citizen ID: accept and check for duplicate: else if it is FIN ID: splice and accept first 9 characters and check for duplicates============================*/

  if ((ID_First_Character == 'S') || (ID_First_Character == 'T')) {

    /*========Check for 9 characters in ID card, if it is 9 characters: accept and perform other checks, else reject=======================================*/
    if ($("#NRICCodeField").val().length == 9) {
      console.log("Local NRICCodeField equal to 9 characters");
      alert("Your Citizen ID is valid");

    } else if ($("#NRICCodeField").val().length > 9) {
      console.log("Local NRICCodeField is not equal to 9 characters");

      $('#Scan_Page').fadeOut();
      $('#Invalid_ID').fadeIn();

      setTimeout(function() {

        $('#Invalid_ID').fadeOut();
        $('#Scan_Page').fadeIn();

        //Reset Field to empty
        $("#NRICCodeField").val("");
        $("#NRICCodeField").focus();
      }, 6000);
    }
  } else if ((ID_First_Character == 'G') || (ID_First_Character == 'F')) {

    //If Detect Scanned ID is FIN, Slice first 9 characters and accept and check for Duplicate
    var WorkerPermitID = $("#NRICCodeField").val().slice(0, 9);

    if (WorkerPermitID.length == 9) {

      alert("Your FIN ID is valid");
    }
  } else {

    $('#Scan_Page').fadeOut();
    $('#Invalid_ID').fadeIn();

    setTimeout(function() {

      $('#Invalid_ID').fadeOut();
      $('#Scan_Page').fadeIn();

      //Reset Field to empty
      $("#NRICCodeField").val("");
      $("#NRICCodeField").focus();
    }, 6000);
  }
});

<div id="Scan_Page" align=" center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; z-index=1; top:0px; left:0px;">

  <input type="password" id="NRICCodeField" style="position:absolute; top:545px; left:690px; height:68px; width:545px; outline: 0; border: 0; font-size:70px; font-color:#765725; font-family:'Gothic'; background: transparent; z-index:100;" autofocus src="lib/image/transparent.png">
</div>

<div id="Invalid_ID" align=" center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; z-index=2; top:0px; left:1921px;">
  <img id="Invalid_ID_msg" src="lib/image/InvalidScan.png" style="position:absolute; top:0px; left:0px; margin:auto;" />
</div>

Code in JSFIddle: http://ift.tt/2hEZsy5

Code in Plunker: http://ift.tt/2htKoVK