正则表达式不匹配时如何禁用提交按钮

Question

Hi all I have written following code:

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

I want to disable the button if the input does not match the regular expression, and enable it if it matches. How can I achieve to that result?

Answer 1

If you want to use JavaScript to dynamically disable the button, use the following:

1. The input eventListener to listen for changes in the field value;
2. The .disabled property to toggle it.

How I implemented on your solution:

1. Created two variables to hold references to the field and to the button .
2. Added validate as the function for an input eventListener (attached to the field ).
3. Compared the field.value to the companyRGEX using string.match(regEx) .

You can run the snippet below.

 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>

Answer 2

Just use pattern with required. No JavaScript is needed

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

If you want to use JavaScript than cancel the submission

 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>

Answer 3

add addEventListener to the input field the return a value from validate function

 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>