[英]Custom validation message for a select
I have this select input field where I want to validate its selected field using javascript - and then show a html5 error message (and make its border red) if "01" is selected in the select input field. 我有这个选择输入字段,我想在其中使用javascript验证其选择字段,如果在选择输入字段中选择了“ 01”,则显示html5错误消息(并使其边框变为红色)。 How can I accomplish this.
我该怎么做。 Right now nothing happens if I select "01".
现在,如果我选择“ 01”,则什么也不会发生。 The code can be tried here:
该代码可以在这里尝试:
http://jsbin.com/wonuwo/edit?html,css,js,output http://jsbin.com/wonuwo/edit?html,css,js,输出
<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>
Using jQuery :: 使用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)');
}
});
});
Hope this is what you expect. 希望这就是您的期望。
I modyfide your code, so this will work: 我修改您的代码,因此可以正常工作:
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"; } }
<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>
change the html code as this 改变这样的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>
value must be sent to the js function.you pass the object.It is the case. 值必须发送到js函数。您可以传递对象。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.