Question

0

214

Views

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>

about 4 years ago · Santiago Trujillo

3 answers

Answer question

0

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>

about 4 years ago · Santiago Trujillo Report

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

about 4 years ago · Santiago Trujillo Report

Answer question

Find remote jobs

Accepted Answer · 2022-08-24T17:31:49.067Z

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>

0

214

Remove disable attribute from a button after input validation

3 answers

0

0

0

Find remote jobs

Andres GPT