向 HTML 选择框添加验证答案

【问题标题】：Adding validation to an HTML select box向 HTML 选择框添加验证
【发布时间】：2013-06-01 21:51:57
【问题描述】：

我想对我的 HTML 表单进行一项简单的验证检查。我希望这样如果用户选择 18 - 24，下拉选择旁边会出现一个错误：“您必须是 25+”。

<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 切换显示和隐藏。当错误 div 切换显示时，希望在页面 ID 上隐藏此消息。但这没有用。我也添加了相应的 CSS。有关如何正确编写此内容的任何指示？

【问题讨论】：

标签： javascript jquery css forms

【解决方案1】：

这样的事情可以用一点 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;
}

【讨论】：

很好的帮助西蒙，非常感谢，伙计！

【解决方案2】：

我认为你必须做的是这样的事情

<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/

【讨论】：