2011-12-28 49 views
0

如何使用此驗證腳本驗證複選框? 我試過很多不同的方法無濟於事。這是一個驗證腳本,在我修改了我的目的的聯繫表單上,但無法弄清楚如何驗證chekboxes。這是我的表單和驗證代碼。使用Jquery腳本進行復選框驗證

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

});

+0

請具體談談您的問題,並考慮製作[jsFiddle](http://jsfiddle.net/),以便我們可以更輕鬆地診斷您的代碼。 – sczizzo 2011-12-28 20:29:22

+0

你究竟需要驗證什麼?如果至少有1個複選框被選中或者有多個被選中?除了使用錯誤的選擇器,你甚至沒有你的'#error'和'#success' div。 – Victor 2011-12-28 20:30:27

+0

我不能爲我的生活弄清楚如何將複選框的驗證添加到上述jQuery表單驗證 – Jakeray 2011-12-28 20:31:49

回答

5

只有一個複選框選中:

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

    return false; 
} 

作爲。是的jQuery的文檔()說:

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. 

祝你好運;)

+0

非常感謝你,這工作完美 – Jakeray 2011-12-28 20:43:08

+0

我很高興它工作:)請,我會很高興,如果你將這個答案標記爲正確的,然後;) – elxordi 2011-12-28 20:48:22