Jquery/javascript Alert If All Fields Are Not Completed

I have a form which I'd like to alert people if ALL of the fields aren't completed. I am currently using a jquery validation script for the required fields, but I need it to also l

Solution 1:

Here's a quick mock-up:

$(document).ready(function() {
    $('form').submit(function() {
        var incomplete = $('form :input').filter(function() {
                             return $(this).val() == '';
                         });
        //if incomplete contains any elements, the form has not been filled 
        if(incomplete.length) {
            alert('please fill out the form');
            //to prevent submission of the form
            return false;
        }
     });
});

Solution 2:

function checkEmpty() {
       var empty = false;
       $("input").each(function() {
           empty = ($(this).val() == "") ? true : empty;
       });
       if(empty) {
           var empty_ok = confirm("Are you Ok with leaving stuff empty?");
           return empty_ok;
       }

the confirm returns a true if they click yes and false if they click no. Return that to the main validator as the value to pass to the submit() event.

Solution 3:

Loop through each input element in a form:

$(':input', formName).each(function() {
    // Check for completion of each input type
})

Solution 4:

( This is why I asked for the markup before blindly answering )

I don't think any of the solutions above account for the logic that only one of the checkboxes must actually be checked and you shouldn't just check if each of them has a value or they would all have one by default. Here's my version which relies on the div enclosing the checkboxes to have a class of 'checkboxgroup'.

Also, the elements that are not filled in are populated to the 'errorElements' array, which you can loop through and add any warning notifications.

$(function() {
$('#adminForm').submit( function ( event ) {
    var errorElements  = window.errorElements = [], valid = false;

    $(':input', this).not(':checkbox').each(function() {
    var val = $(this).val();
    if ( !val.length ) {
        valid = false;
        errorElements.push(this);
    }
    });

    $('.checkboxgroup', this).each(function() {
    var checkBoxes = $(':checkbox', this), oneChecked = false;
    checkBoxes.each(function() {
        if ( !oneChecked && !$(this).is(':checked') ) {
        valid = false;
        errorElements.push(this);
        } else {
        oneChecked = true;
        }
    });
    });

    if ( !errorElements.length ) {
    valid = true;
    }

    if ( !valid ) {
    event.preventDefault();
    alert('please fill in all form fields.');
    } else {
    alert('congratulations');
    }

});
});

Checkbox Snippet:

  <div class="company_1 checkboxgroup">
                <table width="135" border="0" cellspacing="0" cellpadding="0" align="left" style="border: solid 1px #ff0000; margin-right: 10px; background-color: #ff0000; background-image: url(/templates/home/scripts/opacity.png);" class="classTables">
                  <tr>
                    <td colspan="2" align="center" valign="middle" style="background-color: #ff0000; background-image: none; padding: 2px 2px 2px 2px;"><strong>OTHER</strong></td>
                  </tr>
                  <tr>
                    <td align="center" valign="middle" width="20"><input type="checkbox" name="classifications[70]" id="classifications[70]" value="70" class="checkbox" /></td>
                    <td align="left" valign="middle"><label for="classifications[70]">VIP Client</label></td>

If you have multiple checkbox groups just have an element enclosing them with the .checkboxgroup class.