Checkbox Validation with Jquery Script

Question

How do I validate checkboxes using this validation script? I've tried many different ways to no avail. This is a validation script was on a contact form that I modified for my purposes but cannot figure out how to validate chekboxes with it. Here is my form and validation code.

    <form id="contactForm" action="send-mail.php" method="post">
    <table width="492">
      <tr>
    <th><label>Title:</label></th>
         <td><input name="title"  id="title" type="text" class="form-poshytip" title="Enter your first name" /></td>
            </tr>
      <tr>
    <th><label>Name:</label></th>
         <td><input name="name"  id="name" type="text" class="form-poshytip" title="Enter your first name" /></td>
            </tr>
                <tr>
                   <th><label>Email:</label></th>
                     <td><input name="email"  id="email" type="text" class="form-poshytip" title="Enter your email" /></td>                                 </tr>                               
                    <tr>
                    <th><label>Company:</label></th>
                    <td><input name="company"  id="company" type="text" class="form-poshytip" title="Enter your company" /></td>
                    </tr>
                     <tr>
                    <th><label>Phone: (with area code)</label></th>
                    <td><input name="phone"  id="phone" type="text" class="form-poshytip" title="Enter your phone" /></td>
                    </tr>
                    <tr>
                    <th><label>Fax:</label></th>
                    <td><input name="fax"  id="fax" type="text" class="form-poshytip" title="Enter your fax" /></td>
                    </tr>
                     <tr>
                    <th><label>Street:</label></th>
                     <td><input name="street"  id="street" type="text" class="form-poshytip" title="Enter your first name" /></td>
                     </tr>
                      <th><label>City:</label></th>
                     <td><input name="city"  id="city" type="text" class="form-poshytip" title="Enter your city" /></td>
                     </tr>
                      <th><label>State:</label></th>
                     <td><input name="state"  id="state" type="text" class="form-poshytip" title="Enter your state " /></td>
                     </tr>
                      <th><label>Zip:</label></th>
                     <td><input name="zip"  id="zip" type="text" class="form-poshytip" title="Enter your first name" /></td>
                     </tr>
                     <tr>
                    <th colspan="2"><label>Message:</label></th>
                    </tr>
                    <tr>
                    <th></th>
                    <td><textarea  name="comments"  id="comments" rows="5" cols="20" class="form-poshytip" title="Enter your comments"></textarea></td>
                    </tr>
                           <tr>
                    <th colspan="2"><label>Please Choose:</label></th>
                    </tr>
                     <tr>
                     <td><p>
                       <label>
                          <input  style="width:10%;" type="checkbox" name="checkbox[]" value="Initial Free Consultation" id="CheckboxGroup1"  class="options"/>
                       Initial Free Consultation</label>
                       <br />
                       <label>
                         <input style="width:10%;"  type="checkbox" name="checkbox[]" value=" Internal or External Audit" id="CheckboxGroup2" class="options"/>
                       Internal or External Audit</label>
                       <br />
                       <label>
                         <input style="width:10%;"  type="checkbox" name="checkbox[]" value="Security / Compliance Consulting" id="CheckboxGroup3" class="options"/>
                       Security / Compliance Consulting</label>
                       <br />
                       <label>
                         <input style="width:10%;" type="checkbox" name="checkbox[]" value="Risk Assessment" id="CheckboxGroup4" class="options"/>
                       Risk Assessment</label>
                       <br />
                       <label>
                         <input style="width:10%;" type="checkbox" name="checkbox[]" value="Compliance Readiness" id="CheckboxGroup5" class="options"/>
                       Compliance Readiness</label>
                       <br />
                     </p></td> 
                    <td><p>
                      <label>
                        <input style="width:10%;" type="checkbox" name="checkbox[]" value=" Risk Mitigation" id="CheckboxGroup6" class="options"/>
                        Risk Mitigation</label>
                      <br />
                      <label>
                        <input style="width:10%;" type="checkbox" name="checkbox[]" value="Technical Staffing" id="CheckboxGroup7" class="options" />
                        Technical Staffing</label>
                      <br />
                      <label>
                        <input style="width:10%;"  type="checkbox" name="checkbox[]" value="Pen Testing" id="CheckboxGroup8" class="options"/>
                        Pen Testing</label>
                      <br />
                      <label>
                        <input style="width:10%;"  type="checkbox" name="checkbox[]" value="Compliance Products" id="CheckboxGroup9" class="options"/>
                        Compliance Products</label>
                      <br />
                      <label>
                        <input style="width:10%;" type="checkbox" name="checkbox[]" value="Other" id="CheckboxGroup10" class="options"/>
                        Other</label>
                      <br />
                      </p></td>
                    </tr>
                    <tr>
                    <td><input style="position:relative; z-index:100;" type="submit" value="Submit" name="submit" id="submit" /></td>
                    </tr>
                     </table>
                     <input type="hidden" value="[email protected]" name="to" id="to" />
                                <input type="hidden" value="" name="from" id="from" />
                                <input type="hidden" value="" name="subject" id="subject" />
                                <input type="hidden" value="" name="sendMailUrl" id="sendMailUrl" />
                        <p id="error" style="position class="warning">Message</p>
                        </form>
                        <p id="success" class="success">Thanks for your comments.</p>

Jquery

 jQuery(document).ready(function($) {

// hide messages 
$("#error").hide();
$("#success").hide();

// on submit...
$("#contactForm #submit").click(function() {
    $("#error").hide();

    //required:

        var title = $("input#title").val();
    if(title == ""){
        $("#error").fadeIn().text("Title required.");
        $("input#title").focus();
        return false;
    }

    //name
    var name = $("input#name").val();
    if(name == ""){
        $("#error").fadeIn().text("Name required.");
        $("input#name").focus();
        return false;
    }

        //email
    var email = $("input#email").val();
    if(email == ""){
        $("#error").fadeIn().text("Email required.");
        $("input#email").focus();
        return false;
    }


    var company = $("input#company").val();
    if(company == ""){
        $("#error").fadeIn().text("Company required.");
        $("input#company").focus();
        return false;
    }

    // phone
    var phone = $("input#phone").val();
    if(phone == ""){
        $("#error").fadeIn().text("Phone required");
        $("input#phone").focus();
        return false;
    }

        //fax
    var fax = $("input#fax").val();
    if(fax == ""){
        $("#error").fadeIn().text("Fax required.");
        $("input#fax").focus();
        return false;
    }

    var street = $("input#street").val();
    if(street == ""){
        $("#error").fadeIn().text("Street required.");
        $("input#street").focus();
        return false;
    }

    var city = $("input#city").val();
    if(city == ""){
        $("#error").fadeIn().text("City required.");
        $("input#city").focus();
        return false;
    }

    var state = $("input#state").val();
    if(state == ""){
        $("#error").fadeIn().text("State required.");
        $("input#state").focus();
        return false;
    }

    var zip = $("input#zip").val();
    if(zip == ""){
        $("#error").fadeIn().text("Zip code required.");
        $("input#zip").focus();
        return false;
    }

    // comments
    var comments = $("#comments").val();

    // send mail php
    var sendMailUrl = $("#sendMailUrl").val();

    //to, from & subject
    var to = $("#to").val();
    var from = $("#from").val();
    var subject = $("#subject").val();

    // data string
    var dataString = 'title='+ title
                    + '&name=' + name                        
                    + '&email=' + email
                    + '&company=' + company 
                    + '&phone=' + phone 
                    + '&fax=' + fax
                    + '&street=' + street 
                    + '&city=' + city 
                    + '&state=' + state
                    + '&zip=' + zip 
                    + '&comments=' + comments
                    + '&to=' + to
                    + '&from=' + from
                    + '&subject=' + subject;                                 
    // ajax
    $.ajax({
        type:"POST",
        url: sendMailUrl,
        data: dataString,
        success: success()
    });
});  


// on success...
 function success(){
    $("#success").fadeIn();
    $("#contactForm").fadeOut();
 }

return false;

});

Please be more specific about your issue, and consider making a jsFiddle so we can more easily diagnose your code. — sczizzo
– sczizzo, Commented Dec 28, 2011 at 20:29
what exactly do you need to validate? if at least 1 checkbox is checked or if there's more than 1 checked? Other than using wrong selectors, you don't even have your #error and #success divs. — Victor
– Victor, Commented Dec 28, 2011 at 20:30
I can't for the life of me figure out how to add validation for checkboxes to the above jquery form validation — Jakeray
– Jakeray, Commented Dec 28, 2011 at 20:31
if ($('input[type=checkbox]:checked').length() == 0) {alert('Please select at least one checkbox'); return false;} — Victor
– Victor, Commented Dec 28, 2011 at 20:41

elxordi · Accepted Answer · 2011-12-28 20:36:18Z

5

For only one checkbox checked:

if (!$('input[name="checkbox[]"]').is(':checked')) {
    $("#error").fadeIn().text("You must check at least one option.");

    return false;
}

As jQuery documentation of .is() says:

Description: Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.

Good luck ;)

answered Dec 28, 2011 at 20:36

elxordi

4863 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

elxordi Over a year ago

I'm happy it worked :) Please, i would be pleased if you mark this answer as the right one, then ;)

Collectives™ on Stack Overflow

Checkbox Validation with Jquery Script

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related