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?

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?

• javascript
• html

• I think you might need some JS in here. There should be 'events' Something like when you end typing, a function is called. – votelessbubble Commented Mar 9, 2018 at 10:06
• So the user will never be able to submit the form? – Zenoo Commented Mar 9, 2018 at 10:06
• "I want if the required html5 return true" Did you mean "return false"? – J K Commented Mar 9, 2018 at 10:07
• I don't understand what you want to do... – J K Commented Mar 9, 2018 at 10:07
• @Zenoo I mean if both input text is filled, then submit button disable – moses toh Commented Mar 9, 2018 at 10:09

4 Answers 4

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>

you can do it after true

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

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>

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