選擇的自定義驗證消息

Question

我有這個選擇輸入字段，我想在其中使用javascript驗證其選擇字段，如果在選擇輸入字段中選擇了“ 01”，則顯示html5錯誤消息（並使其邊框變為紅色）。 我該怎么做。 現在，如果我選擇“ 01”，則什么也不會發生。 該代碼可以在這里嘗試：

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>

Answer 1

使用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)');
    }
  });
});

希望這就是您的期望。

Answer 2

我修改您的代碼，因此可以正常工作：

 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> 

Answer 3

改變這樣的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函數。您可以傳遞對象。