Enable Submit Button after Validation

Question

I have several input fields and validations. Submit button will be disable at first. Every time I enter a field, validation function will work right away. After every field is filled with valid input, I want to enable the submit button, but I try some code as below, it doesn't work.

if($('input').val() == true) {
           $('.myButton').prop("disabled", false);
        }

Please help

jsfiddle

JS

function validateForm() {
    val = true;
    var firstName = $('#firstname').val();
    if (!firstName) {
        $('#firstname').siblings(".error").addClass('alert-on');
        val = false;
    }
    var lastName = $('#lastname').val();
    if (!lastName) {
        $('#lastname').siblings(".error").addClass('alert-on');
        val = false;
    }

    var input = $('#email');
    var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
    var is_email = re.test(input.val());
    if (!is_email) {
        $('#email').siblings(".error").addClass('alert-on');
        val = false;
    }

    return val;
}
$(function () {
        $('.myButton').prop("disabled", true);
    $("input").on("change keyup paste", function () {
        if (!$(this).val()) { $(this).siblings('.error').addClass('alert-on'); }
        else { $(this).siblings('.error').removeClass('alert-on'); }
    });
        if($('input').val() == true) {
        $('.myButton').prop("disabled", false);
    }
    $("#form").submit(function (event) {
        if (validateForm()) {
            return;
        };
        event.preventDefault();
    });

})

HTML

<form id="form">
        <div class="">
            <input type="text" placeholder="First name*" id="firstname">
            <div class="error">Required</div>
        </div>
        <div class="">
            <input type="text" placeholder="Last name*" id="lastname">
            <div class="error">Required</div>
        </div>
        <div class="">
            <input type="email" id="email" name="email" placeholder="email">
                <div class="error">A valid email address is required</div>  
        </div>
        <div class="">
            <input type="text" placeholder="Phone*" maxlength="12" id="phone">
            <div class="error">Required</div>
        </div>

        <div id="form_submit">
            <button class="myButton" type="submit">
                Submit
            </button>
        </div>
</form>

CSS

input {
  display: list-item;
  margin-bottom: 10px;
}
.error {
  display: none;
  color: red;
}
.alert-on {
  display: block;
}

.myButton{
  height: 40px;
  width: 90px;

}

Keith · Accepted Answer · 2019-11-06 16:21:03Z

1

You need to go through each input to validate whether or not it passes. So something like this:

http://jsfiddle.net/71cantq2/1/

var count = 0; // Set your count here
$("input").on("change keyup paste", function () {
    if (!$(this).val()) { $(this).siblings('.error').addClass('alert-on'); }
    else { $(this).siblings('.error').removeClass('alert-on'); }        

    // Go through each input and see if it passes
    $('input').each(function(index, i){
      var getInput = $(this).val();
      var checkValidation = $(this).closest('div').find('.alert-on').length;
      if(getInput == "" || checkValidation > 0){
        count++;
      }          
    })
    // If everything passes, your button will be enabled
    (count == 0) ? $('.myButton').prop("disabled", false) : $('.myButton').prop("disabled", true);

    // Reset your count each time
    count = 0;
});

edited Nov 6, 2019 at 16:21

answered Nov 4, 2019 at 21:58

Keith

4,1512 gold badges34 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

abcid d Over a year ago

Thanks, Keith! but somehow as soon as only the first field is filled in, the button is enable right away.

Keith Over a year ago

@abcid d Sorry, I missed an equal sign. It should work now.

Collectives™ on Stack Overflow

Enable Submit Button after Validation

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related