How can I disable submit button after required html5 return true on the javascript?

Question

My html code like this:

<form>
    <label for="name">* Name</label>
    <input type="text" id="name" required><br>
    <label for="name">* Address</label>
    <input type="text" id="address" required><br>
    <input type="submit" value="Submit">
</form>

I'm using required HTML5 attribute to validate fields.

If user does not input text, it will display HTML5 error.

I want to disable the submit button if any of the required fields are left empty.

How can I do it?

Answer 1

You can disable the pointer events on the button with CSS.

 form:invalid>#submit { pointer-events: none; } 

 <form> <label for="name">* Name</label> <input type="text" id="name" required><br> <label for="name">* Address</label> <input type="text" id="address" required><br> <input type="submit" value="Submit" id="submit"> </form> 

You could also disable the button using Javascript.

 function disableField() { const invalidForm = document.querySelector('form:invalid'); const submitBtn = document.getElementById('submit'); if (invalidForm) { submitBtn.setAttribute('disabled', true); } else { submitBtn.disabled = false; } } disableField(); const inputs = document.getElementsByTagName("input"); for (let input of inputs) { input.addEventListener('change', disableField); } 

 <form> <label for="name">* Name</label> <input type="text" id="name" required><br> <label for="name">* Address</label> <input type="text" id="address" required><br> <input type="submit" value="Submit" id="submit"> </form> 

Answer 2

你可以做到之后

$("#button").prop("disabled", true);

Answer 3

You can try something like this:

$(function() {
$("#input-text").keyup(function () {
 if($("#input-text")[0].checkValidity()){
      $('#submit-button').attr('disabled', 'disabled');
 }else{
        $('#submit-button').removeAttr('disabled');
 }
 });
})($);

<form id="newRecord">
<input type="text" required id="input-text"/>
<button form="newRecord" type="submit" id="submit-
button">Submit</button>
</form>

Answer 4

An more generic solution for multiple forms and supporting multiple inputs and buttons.

It detects the change event directly on forms individually, and then change the disabled attribute for all submit types

 function disableFormSubmit(form) { const buttons = form.querySelectorAll( 'button[type="submit"], input[type="submit"]' ); const disableButtons = () => buttons.forEach(el => (el.disabled = form.matches(":invalid"))); form.addEventListener("change", disableButtons); disableButtons(); } document.querySelectorAll("form").forEach(disableFormSubmit);

 <form action="/"> <legend>First form</legend> <input type="text" required> <br> <input type="Checkbox" required> required checkbox <br> <input type="submit"> <button type="submit">Button submit</button> </form> <hr> <form action="/"> <legend>Second form</legend> <select required> <option value="" disabled selected>Select one</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br> <input type="radio" required name="radio"> required radio <br> <input type="submit"> <button type="submit">Button submit</button> </form>

Personally i would go on an solution using only CSS as a visual cue, unless you need the disabled attribute