How do I enable my form's submit button using jquery?

Question

I have a basic form with some input fields and a dropdown(select field). Almost all fields have a form of validation. When a field has an error, an error message with the CSS class 'errorText' is displayed next to the field.

By default, my submit button is 'disabled'. I want to remove the 'disabled' attribute from my submit button once all tags with 'errorText' CSS classes are hidden/removed.

my current script just hides all tags with 'errorText' when an error occurs. how do I stop it from doing that and how can I enable my submit button once all fields have been properly enter/validated? Thanks.

EDIT: SOLVED. CODE UPDATED.

// Field Validations
$('#firstName')
  .on('blur', function() {
    var $this = $(this);
    if ($this.val() == '') {
      $('label[for="firstName"]').addClass('errorText');
      $('#errorFName').show();
    } else {
      $('label[for="firstName"]').removeClass('errorText');
      $('#errorFName').hide();
    }
  });
$('#lastName')
  .on('blur', function() {
    var $this = $(this);
    if ($this.val() == '') {
      $('label[for="lastName"]').addClass('errorText');
      $('#errorLName').show();
    } else {
      $('label[for="lastName"]').removeClass('errorText');
      $('#errorLName').hide();
    }
  });
$('#state')
  .on('blur', function() {
    var $this = $(this);
    if ($('#state').val() == "") {
      $('label[for="state"]').addClass('errorText');
      $('#errorState').show();
    } else {
      $('label[for="state"]').removeClass('errorText');
      $('#errorState').hide();
    }
  });

// Submit Button validation
$('input, select').on('keyup, blur', function() {
  if ($('.errorText:visible').length ||
            $('#firstName' || '#lastName' || '#state').val() == '' ) {
            $('input[type="submit"]').prop('disabled', true);
        } else if ($('#firstName').val() != '' &&
            $('#lastName').val() != '' &&
            $('#state').val() != '' ) {
            $('input[type="submit"]').prop('disabled', false);
        }
    });

.errorText {
  color: #c4161c;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<div>
  <label for="firstName" class="required">First Name</label>
</div>
<div>
  <input type="text" name="firstName" id="firstName" />
</div>
<div class="errorText" id="errorFName" style="display:none;">Please enter a First Name</div>
<br />
<div>
  <label for="lastName" class="required">Last Name</label>
</div>
<div>
  <input type="text" name="lastName" id="lastName" />
</div>
<div class="errorText" id="errorLName" style="display:none;">Please enter a Last Name</div>
<br />

<div>
  <label for="state" class="required">State</label>
</div>
<div>
  <select name="state" id="state">
    <option value="">Select State</option>
    <option value="alabama">Alabama</option>
    <option value="alaska">Alaska</option>
    <option value="arizona">Arizona</option>
    <option value="arkansas">Arkansas</option>
    <option value="california">California</option>
    <option value="etc">etc..</option>
  </select>
</div>
<div class="errorText" id="errorState" style="display:none;">Please select a State</div>
<br />
<input type="submit" class="LargeButton" value="Submit Referral" disabled />

First hint: the expression 'input' && 'select' results in the string 'select'. — nnnnnn
– nnnnnn, Commented Jan 6, 2017 at 23:12
your questions should be "minimal and complete." ask a specific question and show minimal code. i'm afraid to answer that, to enable a button it's simply $("#myButton").prop("disabled", false) because you will undoubtedly try to ask 1000 other questions about why your code isn't working. — I wrestled a bear once.
– I wrestled a bear once., Commented Jan 6, 2017 at 23:16
i feel like my question is pretty straight forward. i want to enable my submit button once all the fields have been validated. — Danny Kim
– Danny Kim, Commented Jan 6, 2017 at 23:18
yuor question was straight forward, but it was the wrong question. the way you are enabling the button should work. the one part of your code that you asked about is already fine. anyway.. change your condition to if ($('.errorText:visible').length) which will return truthy (1) if there are any visible errors, or falsy (0) if there are not. $().hide() does not return anything. $('input, select').keyup is how you use multiple selectors, just like in css. — I wrestled a bear once.
– I wrestled a bear once., Commented Jan 6, 2017 at 23:26
ahhh interesting, ok. just tried this and it's not working. fixed my issue with the label disappearing but the submit is constantly enabled even with errors displayed. — Danny Kim
– Danny Kim, Commented Jan 6, 2017 at 23:46

Searching · Accepted Answer · 2017-01-07 19:39:57Z

If it helps, check this update using data-attribute. We group the label,input,error in a div and handle error message. Also simplified the check valid on input and select element but can be modified.

html

<div>
  <label for="firstName" class="required">First Name</label>
  <input type="text" name="firstName" id="firstName" />
  <span class="errorText" style="display:none;">Please enter a First Name</span>
</div>
<br />
<div>
  <label for="lastName" class="required">Last Name</label>
  <input type="text" name="lastName" id="lastName" />
  <span class="errorText" style="display:none;">Please enter a Last Name</span>
</div>
<br />
<div>
  <label for="state" class="required">State</label>
  <select name="state" id="state" data-valid="">
    <option value="">Select State</option>
    <option value="alabama">Alabama</option>
    <option value="alaska">Alaska</option>
    <option value="arizona">Arizona</option>
    <option value="arkansas">Arkansas</option>
    <option value="california">California</option>
    <option value="etc">etc..</option>
  </select>
  <span class="errorText" style="display:none;">Please select a State</span>
</div>
<br />
<input type="submit" id="submit" class="LargeButton" value="Submit Referral" disabled />

script

$(function() {
  $('input,select')
    .on('blur', function() {
      var $this = $(this);
      if ($this.val() == '') {
        $this.data("valid", 'false');
        //find the immediate span with errorText and show it
        $this.next("span.errorText").show();
      } else {
        $this.data("valid", 'true');
        $this.next("span.errorText").hide();
      }
      checkInputs();
    });
});

function checkInputs() {
  //find all the input and select items where the data attribute valid is present and make an array
  var array = $('input,select').map(function() {
    return $(this).data("valid");
  }).get();
  //if there are not empty or false indicating invalid value set submit property to true
  if (array.indexOf("") == -1 && array.indexOf("false") == -1) {
    $("#submit").prop("disabled", false);
  } else {
    $("#submit").prop("disabled", true);
  }
}

css

.errorText {
   color: #c4161c;
   display: block;
 }

Collectives™ on Stack Overflow

How do I enable my form's submit button using jquery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related