我有这个选择输入字段,我想使用javascript验证其选定字段 - 然后显示html5错误消息(并使其边框变为红色)如果" 01"在选择输入字段中选择。我怎样才能做到这一点。现在,如果我选择" 01"则没有任何反应。可以在这里尝试代码:
http://jsbin.com/wonuwo/edit?html,css,js,output
<form id="myForm">
<select name="cardexpiremonthPayment" id="cardexpiremonthPayment" title="Du skal vælge den udløbsmåned som optræder på forsiden af dit betalingskort" oninvalid="Please select Accused Name" onchange="checkValid(this)" required>
<option value="" selected="">Vælg måned</option>
<option value="01">01 - Januar</option>
<option value="02">02 - Februar</option>
<option value="03">03 - Marts</option>
<option value="04">04 - April</option>
<option value="05">05 - Maj</option>
<option value="06">06 - Juni</option>
<option value="07">07 - Juli</option>
<option value="08">08 - August</option>
<option value="09">09 - September</option>
<option value="10">10 - Oktober</option>
<option value="11">11 - November</option>
<option value="12">12 - December</option>
</select>
</form>
<script>
function checkValid(input) {
if (input.value == "01") {
input.setCustomValidity("You're having too much fun!");
} else {
input.setCustomValidity('');
}
}
</script>
答案 0 :(得分:0)
使用jQuery ::
$(document).ready(function(){
$( "#cardexpiremonthPayment" ).change(function() {
alert($("#cardexpiremonthPayment option:selected").text());
if($("#cardexpiremonthPayment option:selected").text() == '01 - Januar'){
alert("Gotcha");
$(this).css('background','rgba(255, 0, 0, 1)');
}
});
});
希望这是你所期望的。
答案 1 :(得分:0)
我想你的代码,所以这将有效:
function checkValid(input) {
if (input.value == "01") {
document.getElementById("myForm").style.border = "5px solid red" ;
document.getElementById("error").style.display = "";
} else {
document.getElementById("myForm").style.border = "none" ;
document.getElementById("error").style.display = "none";
}
}
&#13;
<form id="myForm">
<select name="cardexpiremonthPayment" id="cardexpiremonthPayment" title="Du skal vælge den udløbsmåned som optræder på forsiden af dit betalingskort" oninvalid="Please select Accused Name" onchange="checkValid(this)" required>
<option value="" selected="">Vælg måned</option>
<option value="01">01 - Januar</option>
<option value="02">02 - Februar</option>
<option value="03">03 - Marts</option>
<option value="04">04 - April</option>
<option value="05">05 - Maj</option>
<option value="06">06 - Juni</option>
<option value="07">07 - Juli</option>
<option value="08">08 - August</option>
<option value="09">09 - September</option>
<option value="10">10 - Oktober</option>
<option value="11">11 - November</option>
<option value="12">12 - December</option>
</select>
</form>
<br/>
<div id="error" style="border: 1px solid red; display: none" >
You're having too much fun!
</div>
&#13;
答案 2 :(得分:0)
将html代码更改为此
<select name="cardexpiremonthPayment" id="cardexpiremonthPayment" title="Du skal vælge den udløbsmåned som optræder på forsiden af dit betalingskort" oninvalid="Please select Accused Name" onchange="checkValid(value)" required>
值必须发送到js函数。你传递对象。就是这样。