Disable Submit Button With Jquery Until All Fields Have Values (input, Radio, Select, Checkbox)

I have a form with a several different field types, all of which need to be complete before submission. I have the submit button disabled and would like to remove the disabled attr

Solution 1:

A few remarks:

1. In the next snippet, I assume ALL inputs (except radio buttons) have to be filled in before making the form submittable, which does not necessarily represent all real life scenarios.
2. As mentioned, radios (in this example only 2) are given a special treatment since only one per group can be selected.
3. Concerning <select>s, one will be considered invalid if an empty option if selected (if one exists). In this example, your select tag always has a non-empty value, I added another to the markup to show its behavior.

Let me know if it works

$(document).ready(function() {

 $(":input").on('input', function(){validate();});
 $(":input").on('change', function(){validate();});
});

functionvalidate() {
  var $submitButton = $("input[type=submit]");
  
  var isValid = true;
  
  if($(':checkbox:checked').length != $(':checkbox').length)
    isValid = false;
  elseif($(':radio:checked').length == 0)
    isValid = false;
  else{
    $('input:text, textarea').each(function() {  
      if($(this).val() == ''){
        isValid = false;
        returnfalse;
      }
    });
    if(isValid){
      $('select').each(function() {  
      if($(this).val() == ''){
        isValid = false;
        returnfalse;
      }
    });
    }
  }
  
   $submitButton.prop("disabled", !isValid);
}

.contact-form {
	width: 400px;
	margin: 50px;
}

.contact-form__row {
	padding: 0010px;
	margin: 0010px;
	border-bottom: 1px solid grey;
}

p {
	font-weight: bold;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="contact-form"><divclass="contact-form__row"><p>Text field</p><inputtype="text" /></div><divclass="contact-form__row"><p>Radio fields</p><labelfor="radio-1">Radio 1</label><inputid="radio-1"type="radio"name="radio-option" /><labelfor="radio-2">Radio 2</label><inputid="radio-2"type="radio"name="radio-option" /></div><divclass="contact-form__row"><p>Checkbox fields</p><labelfor="checkbox-1">Checkbox 1</label><inputid="checkbox-1"type="checkbox" /><labelfor="checkbox-2">Checkbox 2</label><inputid="checkbox-2"type="checkbox" /></div><divclass="contact-form__row"><p>Select options</p><selectid="my-select"name="my-select"><optionvalue="a">Option A</option><optionvalue="b">Option B</option></select><selectid="my-select"name="my-select"><option></option><optionvalue="a">Option A</option><optionvalue="b">Option B</option></select></div><divclass="contact-form__row"><p>Text area</p><textarea></textarea></div><divclass="contact-form__row"><inputtype="submit"value="Submit"disabled /></div></div>

Solution 2:

you can do like this with jQuery: (in codepen replace all your javascript with this code, I have tested it in your codepen)

<script>
$(function() {
    $('.contact-form').on('input',':input',function() {
        var inputs = $('.contact-form :input');
        var num_inputs = inputs.length;
        var num_filled = inputs.filter(function() { return !!this.value }).length;
        $('.contact-form :submit').prop('disabled',(num_filled<num_inputs));
    });
});
</script>

good luck!