Check if multiple required fields are empty
<p>So, I'm trying to validate HTML inputs with the attribute "required" before submitting a form to AJAX and I can't figure out for the life of me how to do it without each field having a unique ID (which isn't possible, as I really want to be able to just add "required" to fields and reuse the code without having to add multiple IDs into it).</p>

<p>Here's a snipett of my HTML, so you can see what I'm selecting:</p>

<pre><code>    &lt;div class="control-group"&gt;

        &lt;label class="control-label"&gt;&lt;span class="req"&gt;*&lt;/span&gt; Contact Name:&lt;/label&gt;
        &lt;div class="controls"&gt;

            &lt;input class="input-block-level" type="text" name="contactTitle" value="{$widget.options.contactTitle}" placeholder="Marty McFly" required /&gt;

        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>And here's the jQuery:</p>

<pre><code>    function configureSubmit() {

        var reqInput = "input[required]"

        if( $( reqInput ) ) {

            $( reqInput ).each(function() {

                if( !$(this).val() ){

                    $('input[required]').addClass('falseVal');

                } else {

                    $('input[required]').removeClass('falseVal');

                }

            });
        }

        if ( $(reqInput).hasClass('falseVal') ) {

            alert("Please fill in all required fields.");
            $('input[required]').css('border', '1px solid red');

        } else {

            $.ajax({

                type: 'POST',
                url: $("#options-form").attr('action'),
                data: $("#options-form").serialize(),
                success: function(data) {

                    if (data=='1') {

                        if ($.inArray(configureId,staged_widgets)&lt;0) {
                            staged_widgets.push(configureId);

                        }

                        $("#configure").modal('hide');
                        $("#widget-"+configureId).removeClass('new-widget');
                        updateWidget(configureId);  

                    }

                }

            });

        }
</code></pre>

<p>And the submit button:</p>

<pre><code>    &lt;input type="submit" class="btn btn-primary" onclick="configureSubmit(); return false;" Value="Update" /&gt;
</code></pre>

<p>As you can see, I'm adding a class if the field is empty, then removing a class if the field is filled out. I then check for this class and if it's not present, it submits.</p>

<p>The problem here is, if I <strong>don't</strong> use the .each() selector and I have more than one required field, as soon as the first is filled out, it will submit to AJAX. If I <strong>do</strong> use the .each() selector, it works correctly for all fields being empty, except the last one. If the last field is filled in, it will submit to AJAX, because the function will remove the "falseVal" class from all required fields.</p>

<p>There's got to be a better way to do this! Any ideas?</p>