フロントエンドでの検証を可能にし、ページの読み込みを必要としないを使用できますJavascript
。次のようなものが機能するはずです。
<head>
<script type="text/javascript">
function SelectValidator() {
// Get the select object
var index = document.getElementById("geographic").selectedIndex;
var select = document.getElementById("geographic").options;
// Get our input elements
var county = document.getElementById('county');
var state = document.getElementById('state');
var zipcode = document.getElementById('zipcode');
if (select[index].value === "county") {
if (county.value === null || county.value === "") {
alert("Please complete the County field");
} else {
alert("You could simply put a return statement here.");
}
} else if (select[index].value === "state") {
if (state.value === null || state.value === "") {
alert("Please complete the state field");
} else {
alert("You could simply put a return statement here.");
}
} else if (select[index].value === "zip") {
if (zipcode.value === null || zipcode.value === "") {
alert("Please complete the Zip Code field");
} else {
alert("You could simply put a return statement here.");
}
}
}
</script>
</head>
そしてあなたのフォーム:
<form>
<select multiple="multiple" name="geographic" id="geographic">
<option value="state">State</option>
<option value="county">County</option>
<option value="zip">Zip Code</option>
</select>
<label for="state">What state?</label>
<input id="state" name="state" type="text">
<label for="county">What County?</label>
<input id="county" name="county" type="text">
<label for="zipcode">What is the Zip Code? *</label>
<input id="zipcode" name="zipcode" type="text">
<button type="button" onclick="SelectValidator()">Display index</button>
</form>