Ulangi kod yang sama untuk semua kotak input supaya ia menunjukkan ralat

Question

Saya mempunyai beberapa kotak input pada halaman saya. Berikut adalah dua daripada mereka. Saya mahu mengehadkan pengguna untuk memasukkan nombor sahaja dalam kotak input.

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

Ini adalah kod yang menghadkan pengguna untuk memasukkan nombor sahaja.

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

Saya tidak mahu mengulangi kod di atas untuk setiap kotak input. Adakah mereka mempunyai cara yang lebih pantas supaya saya boleh menggunakan kod yang sama pada semua kotak teks berdasarkan nama kelas mereka dan mempunyai ralat yang berasingan muncul jika semua nombor dimasukkan dalam mana-mana kotak input. Nama kelas mereka semua sama.

Answer 1

Ya, anda boleh memfaktorkan semula kod anda untuk mengelakkan pertindihan dengan menggunakan pemilih kelas dan mengulangi setiap elemen kelas tersebut. Berikut ialah contoh cara mengubah suai kod anda untuk mencapai ini:

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

Dalam contoh ini, kami menggunakan pemilih kelas $('.work') untuk mendapatkan semua elemen dengan kerja kelas dan kemudian mengulangi setiap elemen menggunakan setiap fungsi. Kami juga menggunakan pembolehubah yang sah untuk menjejak status pengesahan. Jika mana-mana kotak input mengandungi data tidak sah, kami tetapkan sah kepada palsu dan putuskan gelung. Akhir sekali, kami menghalang borang daripada diserahkan jika pembolehubah yang sah adalah palsu.