Répétez le même code pour toutes les zones de saisie afin qu'elles affichent l'erreur

Question

J'ai plusieurs zones de saisie sur ma page. En voici deux. Je souhaite restreindre l'utilisateur à saisir uniquement des chiffres dans la zone de saisie.

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

Il s'agit d'un code qui restreint l'utilisateur à saisir uniquement des chiffres.

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

Je ne veux pas répéter le code ci-dessus pour chaque zone de saisie. Disposent-ils d'un moyen plus rapide pour que je puisse appliquer le même code à toutes les zones de texte en fonction de leur nom de classe et qu'une erreur distincte s'affiche si tous les nombres sont saisis dans une zone de saisie. Leurs noms de classe sont tous les mêmes.

Answer 1

Oui, vous pouvez refactoriser votre code pour éviter la duplication en utilisant un sélecteur de classe et en itérant sur chaque élément de cette classe. Voici un exemple de la façon de modifier votre code pour y parvenir :

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

Dans cet exemple, nous utilisons le sélecteur de classe $('.work') pour obtenir tous les éléments avec le travail en classe, puis parcourons chaque élément à l'aide de la fonction each. Nous utilisons également la variable valide pour suivre l'état de validation. Si une zone de saisie contient des données non valides, nous définissons valid sur false et rompons la boucle. Enfin, nous empêchons la soumission du formulaire si la variable valide est fausse.