Remove disable attribute from a button after input validation-CodePudding

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 >
        <h2>Team A Records</h2>
        <div >
          <div >
            <label for="record-1"> Record 1</label>
            <input type="text" id="record-1" />
            <div >number please</div>
          </div>
          <div >
            <label for="record-2"> Record 2</label>
            <input type="text" id="record-2" />
            <div >number please</div>
          </div>
          <div >
            <label for="record-3"> Record 3</label>
            <input type="text" id="record-3" />
            <div >number please</div>
          </div>
        </div>
      </div>
      <button  disabled>Submit</button>

CodePudding user response：

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 >
    <h2>Team A Records</h2>
    <div >
      <div >
        <label for="record-1"> Record 1</label>
        <input type="text" id="record-1" data-valid="false" />
        <div >number please</div>
      </div>
      <div >
        <label for="record-2"> Record 2</label>
        <input type="text" id="record-2" data-valid="false" />
        <div >number please</div>
      </div>
      <div >
        <label for="record-3"> Record 3</label>
        <input type="text" id="record-3" data-valid="false" />
        <div >number please</div>
      </div>
    </div>
  </div>
  <button  disabled>Submit</button>
</div>

CodePudding user response：

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 >
        <h2>Team A Records</h2>
        <div >
          <div >
            <label for="record-1"> Record 1</label>
            <input type="text" id="record-1" />
            <div >number please</div>
          </div>
          <div >
            <label for="record-2"> Record 2</label>
            <input type="text" id="record-2" />
            <div >number please</div>
          </div>
          <div >
            <label for="record-3"> Record 3</label>
            <input type="text" id="record-3" />
            <div >number please</div>
          </div>
        </div>
      </div>
      <button  disabled>Submit</button>

CodePudding user response：

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