Javascript表单验证不适用于select元素

时间:2015-04-11 16:29:18

标签: javascript validation

所以如果没有更改值,我正在尝试更改选择框的样式。用户没有选择任何内容。 yesnoCheck是一个函数,如果选择“other”,则显示一个额外的输入字段。我认为它不会影响此表单验证。这种相同的验证适用于输入字段,但它不适用于选择框。

我也感谢selectedIndex == 0,但它也不起作用。

HTML:

<form name="myForm" method="post" action="" onsubmit="return(validate());">
<label for="lastname">Sukunimesi:</label>
<input type="text" id="lastname" name="lastname" /><br />

<select id="car" name="car" onchange="javascript:yesnoCheck()">
    <option id="noCheck" value="none">Valitse automerkkisi</option>
    <option id="noCheck" value="1">Lada</option>
    <option id="noCheck" value="2">Mosse</option>
    <option id="noCheck" value="3">Volga</option>
    <option id="noCheck" value="4">Vartburg</option>
    <option id="yesCheck" value="other">Muu</option>
</select>
<input type="submit" value="Submit" />
</form>

JS:

<script type="text/javascript">
function yesnoCheck() {
if (document.getElementById("yesCheck").selected) {
    document.getElementById("ifYes").style.display = "block";
}
else document.getElementById("ifYes").style.display = "none";
}

function validate() {
if (document.myForm.lastname.value.length < 3) {
    document.getElementById("lastname").className = "required";
    return false;
}

if (document.myForm.car.value == "none") {
    document.getElementById("car").className = "required";
    return false;
}
alert ("Everything is fine!");
}
</script>

2 个答案:

答案 0 :(得分:0)

您的代码可以检查您的表单名称,并确保在脚本运行之前您的表单存在。

&#13;
&#13;
function check(){
    if (document.myForm.car.value == "none") {
    document.getElementById("car").style.border = "1px solid #900";
    document.getElementById("car").style.backgroundColor = "#ff9";
    return false;
}
}
&#13;
<form name="myForm">
    <select id="car" name="car" onchange="javascript:yesnoCheck()">
    <option id="noCheck" value="none">Valitse automerkkisi</option>
    <option id="noCheck" value="1">Lada</option>
    <option id="noCheck" value="2">Mosse</option>
    <option id="noCheck" value="3">Volga</option>
    <option id="noCheck" value="4">Vartburg</option>
    <option id="yesCheck" value="other">Muu</option>
</select>
</form>
<button onclick="check()">Run script</button>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

所以解决方法是从函数中删除return false;