Repeat the same code for all input boxes so they show the error

Question

There are several input boxes on my page. Here are two of them. I want to restrict the user to only enter numbers in the input box.

<input id="address1"  class="work" />Address1
           <input id="address2"  class="work" />Address2
           <input style="float: right; margin-bottom:20px" type="submit" id="myBtn" 
            value="Submit" class="btn btn-primary"  />
           <alert13></alert13>

This is the code that restricts the user to enter numbers only.

<script>

       
        

      $(document).ready(function () {
         
    
                $('#myBtn1').click(function (event) {
                
                     var txtValue = document.getElementById("address1");
                if (/^[a-zA-Z0-9]+$/i.test(txtValue.value)) {
                    if ((!/^[a-zA-Z]+$/i.test(txtValue.value)) && (/^[0-9]+$/i.test(txtValue.value))) {
                        $('alert13').html("value need to be alphanumeric").css('color', 'red');
                        event.preventDefault();
                    }
                    else {
                        $('alert13').html("");
                    }
                }
                }
                }

</script>

I don't want to repeat the above code for each input box. Do they have a faster way so that I can apply the same code to all textboxes based on their class name and have a separate error pop up if all numbers are entered in any input box. Their class names are all the same.

Answer 1

Yes, you can refactor your code to avoid duplication by using a class selector and iterating over each element of that class. Here is an example of how to modify the code to achieve this:

Address1
Address2

$(document).ready(function () {
    $('#myBtn').click(function (event) {
        let valid = true;

        $('.work').each(function (index, element) {
            const txtValue = $(element).val();
            const alertElement = $('alert13');

            if (/^[a-zA-Z0-9] $/i.test(txtValue)) {
                if ((!/^[a-zA-Z] $/i.test(txtValue)) && (/^[0-9] $/i.test(txtValue))) {
                    alertElement.html("Value needs to be alphanumeric for input #" (index 1)).css('color', 'red');
                    valid = false;
                    return false; // Breaks the loop
                } else {
                    alertElement.html("");
                }
            }
        });

        if (!valid) {
            event.preventDefault();
        }
    });
});

In this example, we use the class selector $('.work') to get all elements with class work and then use the each function to iterate over each element. We also use the valid variable to track validation status. If any input box contains invalid data, we set valid to false and break the loop. Finally, we prevent the form from submitting if the valid variable is false.