javascriptjquerybuttondisabled-control

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

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>

Solution

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