CODEWITHSUNDEEP
javascriptjqueryhtmlcssvalidation
Chirag
Chirag

Reputation: 1022

Issue In Adding Class To TextBox Using Jquery

Basically I'm working on a simple functionality. But stuck on a part when I try to addClass to any HTML Element it's not working.

I've two HTML elements

  1. Dropdown for DocType
  2. TextBox for DocNumber.

Based on selected value in DocType I need to change class for DocNumber which will handle validation part for DocNumber textBox.

Here is code of my script.

$(document).ready(function () {
    $(".number").keydown(function (e) {
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||
        (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
        (e.keyCode >= 35 && e.keyCode <= 40)) {
        return;
    }
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
        }
    });
 });

$('#ddlDoctype').on('change', function () {
    var validateCriteria = $(this).find("option:selected").val();
    if (validateCriteria == "A") {
    $("#txtDocNumber").addClass("minSize[8]");
    $("#txtDocNumber").addClass("number");
    $("#txtDocNumber").removeClass("minSize[12]");
} else if (validateCriteria == "E") {
    $("#txtDocNumber").addClass("minSize[12]");
    $("#txtDocNumber").removeClass("minSize[8]");
    $("#txtDocNumber").addClass("number");
} else if (validateCriteria == "C") {
    $("#txtDocNumber").removeClass("number");
} else {
    $("#txtDocNumber").removeClass("number");
}
});

Here a good thing to notice is that when I add minSize[8] to textbox it gets assigned but number class is not getting assigned to the textbox. When I added that part in watch I get a result that number class is getting assigned but it's not working and allowing user to enter alphabets too.

I can't get out of it even after trying many ways to solve this. If any help is possible then I'll be grateful to you.

Upvotes: 0

Views: 661

Answers (2)

Super User
Super User

Reputation: 9642

As per provided fiddle, You have forgot two thing
1. You have missed jquery library
2. $('#ddlDocType') should be inside $(document).ready
check updated snippet below..

    $(".number").keydown(function (e) {
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||
        (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
        (e.keyCode >= 35 && e.keyCode <= 40)) {
        return;
    }
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
        }
    });

    $('#ddlDocType').on('change', function () {  
        var validateCriteria = $(this).val();

        if (validateCriteria == "A") { 
        $("#txtDocNumber").addClass("number");
    } else if (validateCriteria == "E") {
        $("#txtDocNumber").addClass("number");
    } else if (validateCriteria == "C") {
        $("#txtDocNumber").removeClass("number");
    } else {
        $("#txtDocNumber").removeClass("number");
    }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Document Type: 
<select id="ddlDocType">
  <option value="A">Pan</option>
  <option value="E">Adhar</option>
  <option value="E">Passport</option>
  <option value="D">Driving Licence</option>
</select>
  </br>
  </br>
  Document Number: <input type="text" name="docNum" id="txtDocNumber"><br>

Upvotes: 2

Manoj
Manoj

Reputation: 5071

You need to put change event in document ready and need to register keydown event of .number with on.

       $(document).ready(function () {
            $(document).on('keydown', '.number', function (e) {
                if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||
                    (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
                    (e.keyCode >= 35 && e.keyCode <= 40)) {
                    return;
                }
                if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                    e.preventDefault();
                }
            });
            $('#ddlDoctype').on('change', function () {
                var validateCriteria = $(this).find("option:selected").val();
                if (validateCriteria == "A") {
                    $("#txtDocNumber").addClass("minSize[8]");
                    $("#txtDocNumber").addClass("number");
                    $("#txtDocNumber").removeClass("minSize[12]");
                } else if (validateCriteria == "E") {
                    $("#txtDocNumber").addClass("minSize[12]");
                    $("#txtDocNumber").removeClass("minSize[8]");
                    $("#txtDocNumber").addClass("number");
                } else if (validateCriteria == "C") {
                    $("#txtDocNumber").removeClass("number");
                } else {
                    $("#txtDocNumber").removeClass("number");
                }
            });
        });

Upvotes: 2

Related Questions