將驗證添加到HTML選擇框

我想對我的HTML表單進行一次簡單的驗證檢查。我喜歡它，所以如果用戶選擇了18-24，下拉菜單旁邊會出現一個錯誤，請選擇：「您必須是25+」。將驗證添加到HTML選擇框

<select class="element select medium" id="element_3" name="element_3"> 
<option value="" selected="selected"></option> 
<option value="1" class="error" id="error">18 - 24</option> 
<option value="2" >25 - 34</option> 
<option value="3" >35 - 44</option> 
<option value="4" >45 +</option>

我已經試過同時添加類和ID到值1。然後，我想是這樣：

function hidestuff(page){ 
    document.getElementById(error).style.visibility="hidden"; 
} 

function showstuff(error){ 
    document.getElementById(error).style.visibility="visible"; 
}

嘗試切換顯示和使用JavaScript隱藏。希望在頁面ID上隱藏此消息時，如果錯誤div切換顯示。但是這不起作用。我也添加了相應的CSS。任何關於如何正確寫入的指針？

來源

2013-06-01 Fred Randall

像這樣的東西可以用一個位的jQuery來實現：

這裏有一個JSFiddle

的jQuery：

$(document).ready(function() { 

    $('#errorMsg').hide(); //ensure the error message is hidden 

    $('#element_3').on('change',function() { 

     // any option that has the class "error" will cause the error msg to be 
     // displayed (just in case you feel like adding a 0-17 option later) 
     // To target an element by ID, use $(this).find(":selected").attr('id') == 'error' 

     if ($(this).find(":selected").hasClass('error')) { 
      $('#errorMsg').show(); 
     } else { 
      $('#errorMsg').hide(); 
     } 
    }); 
});

和一些HTML：

<select class="element select medium" id="element_3" name="element_3"> 
    <option value="" selected="selected"></option> 
    <option value="1" class="error" id="error">18 - 24</option> 
    <option value="2" >25 - 34</option> 
    <option value="3" >35 - 44</option> 
    <option value="4" >45 +</option> 
</select> 
<div id="errorMsg">You must be over 25</div>

和爲什麼不用一些CSS來設計它：

#errorMsg { 
    display: inline-block;  
    background-color: #fdd; 
    font: 12pt arial; 
    color: #f00; 

    padding: 2px 5px 2px 5px; 
    border: 1px solid #f00; 
    border-radius: 5px; 
    width: 200px; 
}

來源

2013-06-01 22:07:19

優秀的幫助西蒙，感謝了很多，隊友！ –

我認爲你必須做的是這樣的

<select id="myselect" onchange="check();"> 
    <option value="0">Select option</option> 
    <option value="1">op1</option> 
    <option value="2">op3</option> 
</select> 
<div id="error" style="display:none;">Error mesage</div> 
<div id="page" style="width:100px;height:100px;border:1px solid black;display:none;">my page</div> 
<script> 
    function check() { 
     switch (parseInt($('#myselect').val())) { 
      case 0: 
       $('#error').show(); 
       $('#page').hide(); 
       break; 
      case 1: 
       $('#error').show(); 
       $('#page').hide(); 
       break; 
      case 2: 
       $('#error').hide(); 
       $('#page').show(); 
       break; 

     } 
    } 
</script>

http://jsfiddle.net/SS3gc/4/

來源

2013-06-01 22:09:37 MaVRoSCy

將驗證添加到HTML選擇框

回答

相關問題