Hello Im check through a form to see if the inputs have been filled out. I Keep the submit button disabled until the required fields are filled out. However if I type in the textarea which is required the button is enabled even if the previous required fields are not filled out.
Here is a fiddle https://jsfiddle.net/v2to0fcw/1/
here is the markup
<form action="/contact" method="post">
<div class="form-row firstName">
<p class="form-alert">Enter a valid first name.</p>
<input type="text" name="firstName" id="firstName" placeholder="First Name*" required class="form-control required">
</div>
<div class="form-row lastName">
<p class="form-alert">Enter a valid last name. Example: Smith</p>
<input type="text" name="lastName" id="lastName" placeholder="Last Name" class="form-control">
</div>
<div class="form-row phone">
<p class="form-alert">Enter a valid phone number. Example: 555 555 5555</p>
<input type="tel" name="phone" id="phone" placeholder="Phone" class="form-control">
</div>
<div class="form-row email ">
<p class="form-alert">Enter a valid email. Example: person@email.com</p>
<input type="email" name="email" id="email" placeholder="Email*" required class="form-control required">
</div>
<div class="form-row">
<input type="text" name="subject" id="subject" placeholder="Subject*" required class="form-control required">
</div>
<div class="form-row">
<textarea name="message" id="message" placeholder="Message*" required class="form-control required"></textarea>
</div>
<input type="submit" name="submit" id="submit" value="Send" disabled="disabled" class="btn btn-primary pull-right">
</form>
here is the jquery
$(document).ready(function()
{
(function()
{
$('.required').on('keyup change', function()
{
$('.required').each(function()
{
if (this.value == '')
{
$('#submit').attr('disabled', 'disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
}
else
{
$('#submit').removeAttr('disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
}
});
});
})()
The button will not enable unless you fill out all required fields but if I skip the first three and type in the message the button is enabled. Whats going wrong?
