Trying to select two classes for doing validation

Question

I have a dynamic form inside which i am generating dynamic textbox and iwant to put validation in those textbox so that it accepts only numeric and decimal validation but it's not working. on click of button 'btnASizeR' i am generating textboxes

 var i = 0;
                    $('#btnASizeR').click(function () {
                        /* To check the count of already exist tr in WireDimTbl and then assigning the i value for controlids*/
                        var i = $("#WireDimTbl tbody>tr").length + 1;
                        /* To check the count of already exist tr in WireDimTbl and then assigning the i value for controlids*/
                        var sizerangeMin = "<input type='text' ID='SizeMin" + i + "' name='SizeMin' class='SizeMin' value='2.00' />";
                        var sizerangeMax = "<input type='text' ID='SizeMax" + i + "' name='SizeMax' class='SizeMax' value='3.00' />";
                        var ToleranceMin = "<input type='text' ID='TolMin" + i + "' name='TolMin' class='TolMin' value='1' />";
                        var ToleranceMax = "<input type='text' ID='TolMax" + i + "' name='TolMax' class='TolMax' value='1' />";
                        var markup = "<tr><td>" + sizerangeMin + "</td><td>" + sizerangeMax + "</td><td>" + ToleranceMin + "</td><td>" + ToleranceMax + "</td></tr>";
                        $("#WireDimTbl tbody").append(markup);
                    });
                    $('#btnWdDelete').click(function () {

                        $("#WireDimTbl tbody>tr:last").remove();
                    })

I am trying to select all classes and put a numeric and decimal validation like this but it's not working.Any idea how to do.

$(".SizeMin,.SizeMax,.TolMin,.TolMax").keydown(function (event) {


                        if (event.shiftKey == true) {
                            event.preventDefault();
                        }

                        if ((event.keyCode >= 48 && event.keyCode <= 57) || 
                            (event.keyCode >= 96 && event.keyCode <= 105) || 
                            event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 ||
                            event.keyCode == 39 || event.keyCode == 46 || event.keyCode == 190) {

                        } else {
                            event.preventDefault();
                        }

                        if($(this).val().indexOf('.') !== -1 && event.keyCode == 190)
                            event.preventDefault(); 
                        //if a decimal has been added, disable the "."-button

                    });

score 0 · Accepted Answer · answered Mar 28 '18 at 06:23

The keydown event is attached only to existing elements not newly created elements by code.

Use delegated events for these situations

$("#WireDimTbl").on("keydown", ".SizeMin,.SizeMax,.TolMin,.TolMax", (function (event)
    {

        if (event.shiftKey == true)
        {
            event.preventDefault();
        }

        if ((event.keyCode >= 48 && event.keyCode <= 57) ||
            (event.keyCode >= 96 && event.keyCode <= 105) ||
            event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 ||
            event.keyCode == 39 || event.keyCode == 46 || event.keyCode == 190)
        {}
        else
        {
            event.preventDefault();
        }

        if ($(this).val().indexOf('.') !== -1 && event.keyCode == 190)
            event.preventDefault();
        //if a decimal has been added, disable the "."-button

    }
    ));

These answers should also shed some light on delegated events. Answer 1 , Answer 2

score 0 · Answer 2 · answered Mar 28 '18 at 06:28

The inputs are created AFTER you add event listeners on them.
Try this

$('#WireDimTbl').on('keydown','.SizeMin,.SizeMax,.TolMin,.TolMax',function(event){
    // ... your code ...
})

Or

You can add event listeners after append.

Like this

$('#btnASizeR').click(function () {
    // ... your code ...

    $("#WireDimTbl tbody").append(markup);
    $(".SizeMin,.SizeMax,.TolMin,.TolMax").keydown(function (event) {
        // ... your code ...
    }
});

Trying to select two classes for doing validation

2 Answers2