parkway
parkway

Reputation: 276

validate the input value using jquery

Let say i got input text and dropdown option. As default the dropdown is disabled and input is enabled. So employee id input is playing a role as validate the value that have been key in. Actually the employee id input is where user scan their employeed id where the lenght is equal to 6 and the drowpdown will be enabled. Another method to bypass the scanning the employee id, certain employee will key in specific Keywords at the input for example "KYXY", and by insert the keyword they able to key in the input employee id manually and once employee id input manually length==6 and the dropdown will enabled.. For me this abit tricky.

<input type="text" id="myContent" class="form-control" value="" placeholder="Staff ID">

<select class="form-control" id="dropdownss" disabled="" value="Disabled value">
<option>Select Shift</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>

So here is my jquery

$('document').ready(function() {
        $('#myContent').keyup('input',function(){
        var a = "KYXY";
        var myNumber = this.value;

        if(myNumber == a)
        {
        $('#dropdownss').prop( "disabled", false );
        $('#myContent').val('');
        var userlog="1";


            if($(this).val().length == 6)
            {
                if(userlog == "1")
                {
                    //alert("Yay");
                    $('#myContent').val('');
                    $('#myContent').focus();
                    $('#dropdownss').prop( "disabled", false );
                }
                else
                {
                    $('#dropdownss').prop( "disabled", true );
                }
            }
        }
        else if(myNumber !== a)
        {
            alert("scan only");
            $('#myContent').val('');
            $('#myContent').focus();
        }
        }); 
    });

Upvotes: 0

Views: 317

Answers (2)

Kosh
Kosh

Reputation: 18393

Probably something like this:

$('document').ready(function() {
  $('#myContent').on('input', function() {
    var a = "KYXY";
    var input = $(this);
    var num = input.val();
    
    if (num.length === 6 && !/\D/.test(num)) { 
      $('#dropdownss').prop("disabled", false);
      input.prop('manual', false).val('');
    }
    else if (input.prop('manual') || ~a.indexOf(num)) {
      if (a !== input.val()) return;
      input.prop('manual', true).val('');      
    } else {
      alert("scan only");
      $('#dropdownss').prop("disabled", true);
      $('#myContent').val('');
      $('#myContent').focus();
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="myContent" class="form-control" value="" placeholder="Staff ID">

<select class="form-control" id="dropdownss" disabled="" value="Disabled value">
  <option>Select Shift</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Upvotes: 1

Zakariya Harrak
Zakariya Harrak

Reputation: 23

I had to rewrite a big part of your jQuery code. But this should work.

$('document').ready(function() {
    var myContent =  $('#myContent');
    var dropdown = $('#dropdownss');

    myContent.on('keyup', function() {
        var a = "KYXY";
        var myNumber = $(this).val();

        if (myNumber ==  a) {
            dropdown.removeAttr("disabled");
            myContent.val('');

            var userlog = "1";

            if ($(this).val().length == 6) {
                if (userlog == "1") {
                    // Alert("Yay");
                    myContent.val('');
                    myContent.focus();
                    dropdown.removeAttr('disabled');
                } else {
                    dropdown.attr('disabled', 'disabled');
                }
            }
        } else if (myNumber.length >= 6 && myNumber != a) {
            alert("Scan only");
            myContent.val('');
            myContent.focus();
        }
    });
});

Upvotes: 0

Related Questions