How to Remove disable attribute from a button after input validation?

Question

I have a form with a disabled button at first and if you leave an input empty or fill it with anything but numbers it will raise an error and if you insert number the error will be removed. My question is how can I remove disable attribute from the button after all inputs are error free. Here what I've tried so far:

$("input").blur(function () {
  if (!Number($(this).val()) || $(this).val() === "") {
    $(this).addClass("raise-error");
  } else {
    $(this).removeClass("raise-error");
  }
});

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  font-family: "Montserrat", sans-serif;
  scroll-behavior: smooth;
  text-align: center;
  overflow-x: hidden;
  color: #08085c;
  background-color: #111;
}

.container {
  width: 80%;
  height: 50vh;
  background-color: #fff;
  margin: auto;
  display: flex;
}

.team {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.team-a {
  background-color: bisque;
}


.error {
  text-align: right;
  color: red;
  opacity: 0;
}
.raise-error + .error {
  opacity: 1;
}

input.raise-error {
  border: 1px solid red;
}
.record-box {
  margin-top: 20px;
}
label {
  margin-right: 10px;
}

.btn {
  margin-top: 20px;
  padding: 10px 20px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="team team-a">
        <h2>Team A Records</h2>
        <div class="record-box">
          <div class="input-field">
            <label for="record-1"> Record 1</label>
            <input type="text" id="record-1" />
            <div class="error">number please</div>
          </div>
          <div class="input-field">
            <label for="record-2"> Record 2</label>
            <input type="text" id="record-2" />
            <div class="error">number please</div>
          </div>
          <div class="input-field">
            <label for="record-3"> Record 3</label>
            <input type="text" id="record-3" />
            <div class="error">number please</div>
          </div>
        </div>
      </div>
      <button class="btn" disabled>Submit</button>

Does this answer your question? [javascript remove "disabled" attribute from html input](https://stackoverflow.com/questions/11719961/javascript-remove-disabled-attribute-from-html-input) — Don't Panic, Jul 26 '22 at 08:00
@Don'tPanic that does not answer this question. The OP want's to remove the disabled attribute **after input validation** — ruleboy21, Jul 26 '22 at 08:04

ruleboy21 · Accepted Answer · 2022-07-26T08:24:37.833

You can give the inputs a default attribute like data-valid="false".
When a field is blurred, you can change the attribute's value to true after successfully validating it.
You can then enable the button if all the data-valid="false" are changed to data-valid="true"

Try this

$("input").blur(function() {
  if (!Number($(this).val()) || $(this).val() === "") {
    $(this).addClass("raise-error");
    $(this).attr('data-valid', 'false');
  } else {
    $(this).removeClass("raise-error");
    $(this).attr('data-valid', 'true');
  }

  $('.btn')[$('[data-valid="false"]').length > 0 ? 'attr' : 'removeAttr']('disabled', 'disabled');
});

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Montserrat", sans-serif;
  scroll-behavior: smooth;
  text-align: center;
  overflow-x: hidden;
  color: #08085c;
  background-color: #111;
}

.container {
  width: 80%;
  height: 50vh;
  background-color: #fff;
  margin: auto;
  display: flex;
}

.team {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.team-a {
  background-color: bisque;
}

.error {
  text-align: right;
  color: red;
  opacity: 0;
}

.raise-error+.error {
  opacity: 1;
}

input.raise-error {
  border: 1px solid red;
}

.record-box {
  margin-top: 20px;
}

label {
  margin-right: 10px;
}

.btn {
  margin-top: 20px;
  padding: 10px 20px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="some-container">
  <div class="team team-a">
    <h2>Team A Records</h2>
    <div class="record-box">
      <div class="input-field">
        <label for="record-1"> Record 1</label>
        <input type="text" id="record-1" data-valid="false" />
        <div class="error">number please</div>
      </div>
      <div class="input-field">
        <label for="record-2"> Record 2</label>
        <input type="text" id="record-2" data-valid="false" />
        <div class="error">number please</div>
      </div>
      <div class="input-field">
        <label for="record-3"> Record 3</label>
        <input type="text" id="record-3" data-valid="false" />
        <div class="error">number please</div>
      </div>
    </div>
  </div>
  <button class="btn" disabled>Submit</button>
</div>

could you explain what does it do? $('.btn')[$('[data-valid="false"]').length > 0 ? 'attr' : 'removeAttr']('disabled', 'disabled'); I know what does it do but little confuse with the syntax — ali, Jul 26 '22 at 08:31
@ali it will check if all the fields are valid. If yes, the button will be enabled, else it will be disabled. — ruleboy21, Jul 26 '22 at 08:35

score 1 · Answer 2 · answered Jul 26 '22 at 08:20

The most straight forward way and safest is to reuse your validation function for testing both if the input is valid, and testing if all inputs are valid.

The example below puts the inputs where blur is attached to in the allInputs variable, and the button is disabled if not all inputs are valid (with the every function calling the same isValid functionality)

const allInputs = $("input").blur(function () {
  const isValid = val => val !== "" && Number(val);
  $(this).toggleClass("raise-error",!isValid(this.value));
  $('.btn')[0].disabled = !allInputs.toArray().every(i=>isValid(i.value));
});

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  font-family: "Montserrat", sans-serif;
  scroll-behavior: smooth;
  text-align: center;
  overflow-x: hidden;
  color: #08085c;
  background-color: #111;
}

.container {
  width: 80%;
  height: 50vh;
  background-color: #fff;
  margin: auto;
  display: flex;
}

.team {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.team-a {
  background-color: bisque;
}


.error {
  text-align: right;
  color: red;
  opacity: 0;
}
.raise-error + .error {
  opacity: 1;
}

input.raise-error {
  border: 1px solid red;
}
.record-box {
  margin-top: 20px;
}
label {
  margin-right: 10px;
}

.btn {
  margin-top: 20px;
  padding: 10px 20px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="team team-a">
        <h2>Team A Records</h2>
        <div class="record-box">
          <div class="input-field">
            <label for="record-1"> Record 1</label>
            <input type="text" id="record-1" />
            <div class="error">number please</div>
          </div>
          <div class="input-field">
            <label for="record-2"> Record 2</label>
            <input type="text" id="record-2" />
            <div class="error">number please</div>
          </div>
          <div class="input-field">
            <label for="record-3"> Record 3</label>
            <input type="text" id="record-3" />
            <div class="error">number please</div>
          </div>
        </div>
      </div>
      <button class="btn" disabled>Submit</button>

score 0 · Answer 3 · edited Jul 27 '22 at 10:34

0

If below code doesn't work:

if ($('.raise-error').length > 0) {
  $('.btn').attr( 'disabled', true );
  return true;
}

Then please try to change the button tag with:

<input type="button" class="btn">

edited Jul 27 '22 at 10:34

Tyler2P

2,324
26
22
31

answered Jul 26 '22 at 11:33

Sachin Padha

211
1
4

How to Remove disable attribute from a button after input validation?

3 Answers3