badsyntax badsyntax - 2 months ago 6
HTML Question

jquery each function not working as intended

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?

Answer

I've updated the fiddle:

https://jsfiddle.net/efbonrnr/1/

    $('.required').on('keyup change', function() 
    {
            var requiredFieldsCompleted = true;
        $('.required').each(function() 
        {
            if (this.value == '')
            {
                requiredFieldsCompleted = false;
            }
        });

        if (requiredFieldsCompleted)
        {
            $('#submit').removeAttr('disabled');

        }
        else
        {
            $('#submit').attr('disabled', 'disabled');
        }

    });

The issue was you were disabling / enabling the field after each check, without taking into the previous items. As such, only the last required field would affect the result.