将验证添加到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选择框

回答

相关问题