CODEWITHSUNDEEP
javascripthtml
moses toh
moses toh

Reputation: 13172

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

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?

Upvotes: 0

Views: 8486

Answers (4)

Maxwell s.c
Maxwell s.c

Reputation: 1668

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

Upvotes: 0

Agney
Agney

Reputation: 19204

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>

Upvotes: 6

hazrat
hazrat

Reputation: 93

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>

Upvotes: 0

QasimRamzan
QasimRamzan

Reputation: 397

you can do it after true

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

Upvotes: 0

Related Questions