Repeating the same code for all the input boxes so that they show the error

I have several input boxes on my page. These are two of them. I want to restrict the user to enter only digits 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 only digits.

<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 dont want to repeat the above code for every input box. Is their any quicker way so that I can apply the same code for all text boxes based on their class name and the separate error pops up if all digits are entered in any of the input box. The class name is same for all of them.

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

<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>

$(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 are using the class selector $('.work') to get all the elements with the class work and then iterating through each of them using the each function. We also keep track of the validation status using the valid variable. If any of the input boxes contain invalid data, we set valid to false and break the loop. Finally, we prevent the form submission if the valid variable is false.