简体   繁体   中英

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();
        }
        }); 
    });

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> 

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();
        }
    });
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM