Hai semua saya telah menulis kode berikut:

    <form action="" onsubmit="validate()">
      <input type="text" id="FormField_6_input" maxlength="20" name="CompanyName"/>
      <button>Continue</button>
    </form>    

    <script>
      function validate(){
        var company_Name = document.getElementById('FormField_6_input').value;
        var companyRGEX = /[2-9]{1}\d{3}/;
        var result = !companyRGEX.test(company_Name);
        alert(result)
      }
   </script>

Saya ingin menonaktifkan tombol jika input tidak cocok dengan ekspresi reguler, dan mengaktifkannya jika cocok. Bagaimana saya bisa mencapai hasil itu?

0
Vardan Hambardzumyan 23 Desember 2020, 18:06

3 jawaban

Jawaban Terbaik

Jika Anda ingin menggunakan JavaScript untuk menonaktifkan tombol secara dinamis, gunakan yang berikut ini:

  1. input eventListener untuk mendengarkan perubahan nilai bidang;
  2. Properti .disabled untuk mengaktifkannya.

Bagaimana saya menerapkan solusi Anda:

  1. Membuat dua variabel untuk menyimpan referensi ke field dan ke button.
  2. Menambahkan validate sebagai fungsi untuk input eventListener (terlampir pada field).
  3. Bandingkan field.value dengan companyRGEX menggunakan string.match(regEx).

Anda dapat menjalankan cuplikan di bawah ini.

let companyNameField = document.getElementById('FormField_6_input');
let button = document.getElementById('ContinueButton_6');

companyNameField.addEventListener('input', validate);
    
function validate(){
    var companyNameValue = companyNameField.value;
    var companyRGEX = /[2-9]{1}\d{3}/;

    if(!companyNameValue.match(companyRGEX)) {
        button.disabled = true;
    } else {
        button.disabled = false;
    }
}
<form action="" onsubmit="validate()">
    <input type="text" id="FormField_6_input" maxlength="20" name="CompanyName"/>
    <button id="ContinueButton_6">Continue</button>
</form> 
1
Set 23 Desember 2020, 15:29

Cukup gunakan pola dengan yang diperlukan. Tidak diperlukan JavaScript

<form action="" onsubmit="validate()">
  <input type="text" id="FormField_6_input" maxlength="20" name="CompanyName" pattern="[2-9]{1}\d{3}" required>
  <button>Continue</button>
</form>

Jika Anda ingin menggunakan JavaScript daripada membatalkan pengiriman

function validateIt (evt) {
  var company_Name = document.getElementById('FormField_6_input').value;
  var companyRGEX = /[2-9]{1}\d{3}/;
  var isValid = !!companyRGEX.test(company_Name);
  if (!isValid) {
    evt.preventDefault();
    alert('error');
  }
}

console.log(document.querySelector("form"))
document.querySelector("form").addEventListener("submit", validateIt);
<form action="">
  <input type=" text " id="FormField_6_input" maxlength="20" name="CompanyName" />
  <button>Continue</button>
</form>
0
epascarello 23 Desember 2020, 15:22

Tambahkan addEventListener ke bidang input, kembalikan nilai dari fungsi validate

document.getElementById('FormField_6_input').addEventListener('input', function(evt) {
  document.getElementById('submit').disabled = validate(this.value)
});

function validate(company_Name) {
  var companyRGEX = /[2-9]{1}\d{3}/;
  var result = !companyRGEX.test(company_Name);
  return result;
}
<form action="" onsubmit="validate()">
  <input type="text" id="FormField_6_input" maxlength="20" name="CompanyName" />
  <button id="submit">Continue</button>
</form>
0
Ram Segev 23 Desember 2020, 15:27