私のフォームには、国、州を含む多くのフィールドがあります。
国のドロップダウンにリストされているすべての国で、米国を選択すると、その州が州のドロップダウンに表示されます(州のドロップダウン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.");
上記は私の検証コードです..
USstateid（国があり、stateidドロップダウンが表示されている場合）が必須フィールドであることを確認したい。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>