Figuring out if all form fields are complete

Question

Problem

I'm trying to figure out whether all the input fields of a form have been completed so I can removeClass .is-disabled from the submit button to allow the user to submit the form.

I've looked at the similarly posed question, "Submit form only if all required fields are full?" but I'm not sure this entirely sure what it's doing, though it sounds close to what I want?

this.validate_form = function(form){
    for (var i = 0; i < form.elements.length; i++){
        if(form.elements[i].value == "" && form.elements[i].getAttribute("name") && form.elements[i].hasAttribute("required"))
        {
            return false;
        }
    }
    return true;
}

Where I'm at

I've written this snippet below, which uses a click handler, but I'm pretty certain this is not the right approach as the person has to actually click to determine whether the fields are filled out and neither does it take into account if someone tabbed through the form.

scripts.js

// If any input is clicked run the following
$("input, select").on("click", function(){

    // Filters empty form fields
    var emptyFields = $("input, select").filter(function () {
        return !this.value.trim();
    }).length;

    if (emptyFields == 0) {
        $(".button__submit").removeClass("is-disabled");
        $(".button__submit").addClass("is-active");
        $(".check--two").css("color", "#ffdc00");
    } else {
        $(".button__submit").removeClass("is-active");
        $(".button__submit").addClass("is-disabled");
        $(".check--two").css("color", "#ccc");
    }
});

Answer 1

You can use input event if you don't need to support old browsers. If you need to do, you can use keyup event for input and change event for select.

Html

<form>
  <input >
  <select>
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <button disabled="true">Submit</button>
</form>

Javascript

$(function(){

  function validate(){
    var invalids = $('input, select').filter(function(){
      return !this.value.trim();
    });
    $('button').attr('disabled', invalids.length>0);
  }

  $('input').on('keyup', validate);
  $('select').on('change', validate);

})

Demo is here.

Answer 2

Use .on("change")

The change event is sent to an element when its value changes.

$("input, select").on("change", function(){

    // Filters empty form fields
    var emptyFields = $("input, select").filter(function () {
        return !this.value.trim();
    }).length;

    if (emptyFields == 0) {
        $(".button__submit").removeClass("is-disabled");
        $(".button__submit").addClass("is-active");
        $(".check--two").css("color", "#ffdc00");
    } else {
        $(".button__submit").removeClass("is-active");
        $(".button__submit").addClass("is-disabled");
        $(".check--two").css("color", "#ccc");
    }
});

Answer 3

Use .on('input' so that it will update as soon as an input changes. Also for the var emptyFields make sure your submit button has a value or specify $('input[type=text]

 $("input, select").on("input", function() { // Filters empty form fields // $("input[type=text], --if submit button has no value var emptyFields = $("input, select").filter(function() { return !this.value.trim(); }).length; if (emptyFields == 0) { $(".button__submit").removeClass("is-disabled"); $(".button__submit").addClass("is-active"); $(".check--two").css("color", "#ffdc00"); } else { $(".button__submit").removeClass("is-active"); $(".button__submit").addClass("is-disabled"); $(".check--two").css("color", "#ccc"); } }); 

 <form> <input type='text' placeholder='First Name'> <input type='text' placeholder='Last Name'> <select> <option value="1-17">Youngster</option> <option value="18-25">Adult</option> <option value="26-50">Mid-life</option> <option value="51+">Old person</option> </select> <input type='submit' value='submit' class='is-disabled button__submit button__submit'> </form> 

Answer 4

我建议您使用易于集成且效果很好的jquery验证插件 ： http : //jqueryvalidation.org/

Answer 5

You may be able to do this without JavaScript by using the HTML5 validation features.

Specifically, add a "required" attribute to the inputs and update the CSS to use the :valid and :invalid pseudo classes.