ansaurus

Question

jquery/javascript alert if all fields are not completed

Answer 1

+1 A:

Loop through each input element in a form:

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

Brian 2009-09-22 01:41:45

That would not target descendants, especially if the form fields are enclosed with divisions for stylistic purposes.

meder 2009-09-22 01:44:32

Yes it would...

jnylen 2009-09-22 01:54:25

You're looking at the modified version of the code after my comment. See the initial version.

meder 2009-09-22 02:07:14

Yep, I should have said that. This question was answered above with what looks to be a solid solution.

Brian 2009-09-22 02:09:51

Answer 2

+3 A:

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.

Anthony 2009-09-22 01:45:40

Better to use $(":input", myForm). That will handle other input tags (textareas, etc.) and multiple forms on a page. (Catching other input tags is probably more important, though.)

jnylen 2009-09-22 01:57:35

Answer 3

+2 A:

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;
        }
     });
});

karim79 2009-09-22 01:46:00

That would not target descendants, especially if the form fields are enclosed with divisions for stylistic purposes. (meder I stole your comment :P)

jnylen 2009-09-22 01:55:02

@jnylen - That's true, I don't know what the form looks like, but I guess that could be rectified using ancestor-descendant, i.e. 'form input' instead of 'form > input'. Thanks for the point.

karim79 2009-09-22 01:57:59

thank you muchly :)

SoulieBaby 2009-09-22 02:28:40

Answer 4

+1 A:

( 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.

meder 2009-09-22 02:30:30

Answer 5

A:

cheese on toast.

cheese 2009-11-26 13:35:44

ansaurus

tags:

views:

answers:

jquery/javascript alert if all fields are not completed

related questions