使用jquery.validate.js和jquery.form.js检查条件

Question

在我的表格中有很多字段，包括国家，州。

在国家/地区下拉列表中列出所有国家/地区，当我选择美国时，它会在状态下拉列表中显示其状态（此处stateid是状态下拉列表的ID）。

如果我选择其他国家/地区，则会显示一个用于输入状态的文本框，并且下拉列表将被取消显示（此处statename是状态文本框的ID）。

我还使用jquery.validate.js和jquery.form.js在此页面中进行了验证。

$(document).ready(function ()
{
    $('#errorbox').hide();

    validator = $("#custom-form-validate").validate({
        errorContainer: "#errorbox",
        errorLabelContainer: "#errorbox ul",
        wrapper: "li",
        rules: {
            firstname: "required",
            lastname: "required",
            email: {
                required: true,
                email: true
            },
            credentialdegree: "required",
            address: "required",
            confirmemail: {
                required: true,
                equalTo: '#email'
            },
            telephone: {
            required: true,
            },
            city: "required",

            postcode: {
                required: true,
                digits: true
            },
            country_id: { valueNotEquals: "" },
            },
            messages: {
                credentialdegree: "Degree Field is Required.",
                email: {
                    required: "Please enter the Email ID.",
                    email: "Please enter a valid Email ID."
                },
                firstname: {
                    required: "Please enter the First Name."
                },
                lastname: {
                    required: "Please enter the Last Name."
                },
                address: {
                    required: "Please enter the Address."
                },
                confirmemail: {
                    required: "Please enter Confirm Email address.",
                    confirmemail: "Please enter a valid Confirm email address."
                },
                telephone: {
                    required: 'Please enter Phone Number.'
                },
                city: { required: "Please enter City" },
                postcode: {
                    required: 'Please enter the Postal Code.',
                    digits: 'Postal Code(Please Enter Numbers Only.)'
                },
                country_id: {
                    valueNotEquals: "Please select the Country. "
                }
            },
            invalidHandler: function (form, validator)
            {
                $("#errorbox").show();
            }
        });
    });

    $.validator.addMethod("valueNotEquals", function (value, element, arg)
    {
        return arg != value;
    }, "Value must not equal arg.");

以上是我的验证码..

我想检查stateid（如果国家/地区为US且显示stateid下拉列表）是必填字段。 并且想要检查statename（如果国家/地区不是US且显示statename文本框）是必填字段。

我该怎么做？

编辑：

这是html：

<form enctype="multipart/form-data" id="custom-form-validate" method="POST" action="index.php">
        <ul class="form-list">
            <li>
                <label>First Name:<span>*</span></label>
                <input type="text" class="input-text" title="UserFirstname" value="" id="firstname" name="firstname">
            </li>
            <li>
                <label>Last name:<span>*</span></label>
                <input type="text" class="input-text" title="UserLastname" value="" id="lastname" name="lastname">
            </li>
            <li>
                <label>Credential/Degree (If applicable):<span>*</span></label>
                <input type="text" class="required-entry" title="Credential" value="" id="credentialdegree" name="credentialdegree">
            </li>
            <li>
                <label for="name">Company name:</label>
                <input type="text" class="input-text" title="Company" value="" id="company" name="company">
            </li>
             <li>
                <label class="required" for="name">Address:<span>*</span></label>
                <textarea id="address" name="address"></textarea>
            </li>
            <li>
                <label>Phone:<span>*</span></label>
                 <input type="text" class="input-text" title="Telephone" value="" id="telephone" name="telephone">
                <div class="clear"></div>
            </li>
            <li>
                <label>City:<span>*</span></label>
                <input type="text" class="input-text" title="City" value="" id="city" name="city">
           </li>  


<li>
<label>Country:<span>*</span></label>
<select name="country_id" id="country" class="validate-select" title="Country"><option value=""> </option><option value="AF">Afghanistan</option><option value="AL">Albania</option><option value="DZ">Algeria</option><option value="AS">American Samoa</option><option value="AD">Andorra</option><option value="AO">Angola</option><option value="AI">Anguilla</option><option value="AQ">Antarctica</option><option value="AG">Antigua and Barbuda</option><option value="AR">Argentina</option><option value="AM">Armenia</option><option value="AW">Aruba</option><option value="AU">Australia</option><option value="AT">Austria</option><option value="AZ">Azerbaijan</option><option value="BS">Bahamas</option><option value="BH">Bahrain</option><option value="BD">Bangladesh</option><option value="BB">Barbados</option><option value="BY">Belarus</option><option value="BE">Belgium</option><option value="BZ">Belize</option><option value="BJ">Benin</option><option value="BM">Bermuda</option><option value="BT">Bhutan</option><option value="BO">Bolivia</option><option value="BA">Bosnia and Herzegovina</option><option value="BW">Botswana</option><option value="BV">Bouvet Island</option><option value="BR">Brazil</option><option value="IO">British Indian Ocean Territory</option><option value="VG">British Virgin Islands</option><option value="BN">Brunei</option><option value="BG">Bulgaria</option><option value="BF">Burkina Faso</option><option value="BI">Burundi</option><option value="KH">Cambodia</option><option value="CM">Cameroon</option><option value="CA">Canada</option><option value="CV">Cape Verde</option><option value="KY">Cayman Islands</option><option value="CF">Central African Republic</option><option value="TD">Chad</option><option value="CL">Chile</option><option value="CN">China</option><option value="CX">Christmas Island</option><option value="CC">Cocos [Keeling] Islands</option><option value="CO">Colombia</option><option value="KM">Comoros</option><option value="CG">Congo - Brazzaville</option><option value="CD">Congo - Kinshasa</option><option value="CK">Cook Islands</option><option value="CR">Costa Rica</option><option value="HR">Croatia</option><option value="CU">Cuba</option><option value="CY">Cyprus</option><option value="CZ">Czech Republic</option><option value="CI">Côte d’Ivoire</option><option value="DK">Denmark</option><option value="DJ">Djibouti</option><option value="DM">Dominica</option><option value="DO">Dominican Republic</option><option value="EC">Ecuador</option><option value="EG">Egypt</option><option value="SV">El Salvador</option><option value="GQ">Equatorial Guinea</option><option value="ER">Eritrea</option><option value="EE">Estonia</option><option value="ET">Ethiopia</option><option value="FK">Falkland Islands</option><option value="FO">Faroe Islands</option><option value="FJ">Fiji</option><option value="FI">Finland</option><option value="FR">France</option><option value="GF">French Guiana</option><option value="PF">French Polynesia</option><option value="TF">French Southern Territories</option><option value="GA">Gabon</option><option value="GM">Gambia</option><option value="GE">Georgia</option><option value="DE">Germany</option><option value="GH">Ghana</option><option value="GI">Gibraltar</option><option value="GR">Greece</option><option value="GL">Greenland</option><option value="GD">Grenada</option><option value="GP">Guadeloupe</option><option value="GU">Guam</option><option value="GT">Guatemala</option><option value="GG">Guernsey</option><option value="GN">Guinea</option><option value="GW">Guinea-Bissau</option><option value="GY">Guyana</option><option value="HT">Haiti</option><option value="HM">Heard Island and McDonald Islands</option><option value="HN">Honduras</option><option value="HK">Hong Kong SAR China</option><option value="HU">Hungary</option><option value="IS">Iceland</option><option value="IN">India</option><option value="ID">Indonesia</option><option value="IR">Iran</option><option value="IQ">Iraq</option><option value="IE">Ireland</option><option value="IM">Isle of Man</option><option value="IL">Israel</option><option value="IT">Italy</option><option value="JM">Jamaica</option><option value="JP">Japan</option><option value="JE">Jersey</option><option value="JO">Jordan</option><option value="KZ">Kazakhstan</option><option value="KE">Kenya</option><option value="KI">Kiribati</option><option value="KW">Kuwait</option><option value="KG">Kyrgyzstan</option><option value="LA">Laos</option><option value="LV">Latvia</option><option value="LB">Lebanon</option><option value="LS">Lesotho</option><option value="LR">Liberia</option><option value="LY">Libya</option><option value="LI">Liechtenstein</option><option value="LT">Lithuania</option><option value="LU">Luxembourg</option><option value="MO">Macau SAR China</option><option value="MK">Macedonia</option><option value="MG">Madagascar</option><option value="MW">Malawi</option><option value="MY">Malaysia</option><option value="MV">Maldives</option><option value="ML">Mali</option><option value="MT">Malta</option><option value="MH">Marshall Islands</option><option value="MQ">Martinique</option><option value="MR">Mauritania</option><option value="MU">Mauritius</option><option value="YT">Mayotte</option><option value="MX">Mexico</option><option value="FM">Micronesia</option><option value="MD">Moldova</option><option value="MC">Monaco</option><option value="MN">Mongolia</option><option value="ME">Montenegro</option><option value="MS">Montserrat</option><option value="MA">Morocco</option><option value="MZ">Mozambique</option><option value="MM">Myanmar [Burma]</option><option value="NA">Namibia</option><option value="NR">Nauru</option><option value="NP">Nepal</option><option value="NL">Netherlands</option><option value="AN">Netherlands Antilles</option><option value="NC">New Caledonia</option><option value="NZ">New Zealand</option><option value="NI">Nicaragua</option><option value="NE">Niger</option><option value="NG">Nigeria</option><option value="NU">Niue</option><option value="NF">Norfolk Island</option><option value="KP">North Korea</option><option value="MP">Northern Mariana Islands</option><option value="NO">Norway</option><option value="OM">Oman</option><option value="PK">Pakistan</option><option value="PW">Palau</option><option value="PS">Palestinian Territories</option><option value="PA">Panama</option><option value="PG">Papua New Guinea</option><option value="PY">Paraguay</option><option value="PE">Peru</option><option value="PH">Philippines</option><option value="PN">Pitcairn Islands</option><option value="PL">Poland</option><option value="PT">Portugal</option><option value="PR">Puerto Rico</option><option value="QA">Qatar</option><option value="RO">Romania</option><option value="RU">Russia</option><option value="RW">Rwanda</option><option value="RE">Réunion</option><option value="BL">Saint Barthélemy</option><option value="SH">Saint Helena</option><option value="KN">Saint Kitts and Nevis</option><option value="LC">Saint Lucia</option><option value="MF">Saint Martin</option><option value="PM">Saint Pierre and Miquelon</option><option value="VC">Saint Vincent and the Grenadines</option><option value="WS">Samoa</option><option value="SM">San Marino</option><option value="SA">Saudi Arabia</option><option value="SN">Senegal</option><option value="RS">Serbia</option><option value="SC">Seychelles</option><option value="SL">Sierra Leone</option><option value="SG">Singapore</option><option value="SK">Slovakia</option><option value="SI">Slovenia</option><option value="SB">Solomon Islands</option><option value="SO">Somalia</option><option value="ZA">South Africa</option><option value="GS">South Georgia and the South Sandwich Islands</option><option value="KR">South Korea</option><option value="ES">Spain</option><option value="LK">Sri Lanka</option><option value="SD">Sudan</option><option value="SR">Suriname</option><option value="SJ">Svalbard and Jan Mayen</option><option value="SZ">Swaziland</option><option value="SE">Sweden</option><option value="CH">Switzerland</option><option value="SY">Syria</option><option value="ST">São Tomé and Príncipe</option><option value="TW">Taiwan</option><option value="TJ">Tajikistan</option><option value="TZ">Tanzania</option><option value="TH">Thailand</option><option value="TL">Timor-Leste</option><option value="TG">Togo</option><option value="TK">Tokelau</option><option value="TO">Tonga</option><option value="TT">Trinidad and Tobago</option><option value="TN">Tunisia</option><option value="TR">Turkey</option><option value="TM">Turkmenistan</option><option value="TC">Turks and Caicos Islands</option><option value="TV">Tuvalu</option><option value="UM">U.S. Minor Outlying Islands</option><option value="VI">U.S. Virgin Islands</option><option value="UG">Uganda</option><option value="UA">Ukraine</option><option value="AE">United Arab Emirates</option><option value="GB">United Kingdom</option><option value="US" selected="selected">United States</option><option value="UY">Uruguay</option><option value="UZ">Uzbekistan</option><option value="VU">Vanuatu</option><option value="VA">Vatican City</option><option value="VE">Venezuela</option><option value="VN">Vietnam</option><option value="WF">Wallis and Futuna</option><option value="EH">Western Sahara</option><option value="YE">Yemen</option><option value="ZM">Zambia</option><option value="ZW">Zimbabwe</option><option value="AX">Åland Islands</option></select>
</li>

<li> 
<label>State:<span>*</span></label>
<select class="required-entry validate-select" defaultvalue="US" id="region_id" name="region_id" title="State/Province" style="">
<option value="">Please select region, state or province</option>
<option title="Alabama" value="1">Alabama</option><option title="Alaska" value="2">Alaska</option><option title="American Samoa" value="3">American Samoa</option></select>
 <input type="text" style="display:none;" class="input-text" title="State" value="" name="region" id="region">
<div class="divAjaxLoaderRed"></div>
<div class="clear"></div></li>

             <li>
                 <label>Postal Code:<span>*</span></label>
                 <input type="text" class="input-text" title="Zip/Postal Code" value="" id="postcode" name="postcode">
                 <div class="clear"></div>
             </li>    
              <li>
                 <label>Email:<span>*</span></label>
                 <input type="text" class="input-text" title="Email" value="" id="email" name="email">
            </li>
            <li>
                 <label class="required" for="email">Confirm Email:<span>*</span></label>
                 <input type="text" class="input-text" title="Confirmemail" value="" id="confirmemail" name="confirmemail">
            </li>            
            </ul>
             <div class="clear"></div>
            <br clear="all">
            <ul style="margin-top:5px">
            <li>
            <label>Please enter any additional information or questions here:</label>
            <div>
              <textarea title="Additional Information" value="" id="additionalinfo" name="additionalinfo"></textarea>
            </div>
            </li>
            <li>
                <p class="margin-top-3 margin-bottom-2 defult">
                To help us prevent automated scripts from sending this form, please type the 2 words below.
To generate new words, simply click the blue 'recycle' button on the right.
                </p>
            </li>
            </ul>

            <div class="submit_div">
            <input type="hidden" name="password" value="123456" title="Password" class="input-text " id="password" readonly="readonly">
            <input type="hidden" name="confirmation" value="123456" title="Confirmation" class="input-text " id="confirmation" readonly="readonly">
            <input type="hidden" name="usertype" value="0" title="usertype" class="input-text " id="usertype" readonly="readonly">
            <input type="hidden" name="group_id" value="5" title="group_id" class="input-text " id="group_id" readonly="readonly">
            <input type="submit" id="send" value="Submit" class="submit margin-top-2">
            </div>
        </form>

 <script type="text/javascript">
 $(document).ready(function() {
     $("#country option[value='US']").attr("selected", "selected");

     $("#country").change(function (){
            if($(this).val() != "US"){
                    $("#region_id").hide();
                    $("#region").show();
                    $("#region_id").val("");
            } else {
                    $("#region").hide();
                    $("#region_id").show();
                    $("#region").val("");
            }
     });
 });

 </script>