如何检查是否选择了表单选择来提交表单？答案

【问题标题】：How to Check that a Form Selection is selected to submit the form?如何检查是否选择了表单选择来提交表单？
【发布时间】：2014-07-10 22:02:05
【问题描述】：

我有一个包含 6 个不同的 SELECTION / OPTION HTML 下拉列表的表单。如何进行错误检查以确保在提交表单之前选择了所有 6 个 SELECT？如果它们不是，则会弹出 ALERT 并且不会提交表单。

<head>
<script src="http://path/to/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var num = 2;
    $(":input").each(function(){
    if((this).val()==num){
        event.preventDefault();
        alert("Please ensure all fields are selected to submit the form");
    }
});
});
</script>
</head>

我的表格：

<form>
Prior History of DVT or PE: 
<select name="prior">
<option value="2">--</option>
<option value="1">yes</option>
<option value="0">no</option>
</select>

...

PE is #1 Diagnosis, or Equally Likely::
<select name="likelydx">
<option value="2">--</option>
<option value=1>yes</option>
<option value=0>no</option>
</select>

</form>

【问题讨论】：

检查每个选择元素的selectedIndex 属性。如果为 -1，则不选择任何选项。如果它是任何其他值，则已选择一个：if (this.selectedIndex == -1) {/* no option is selected */}。

标签： javascript php jquery forms select

【解决方案1】：

我这里有一个简单的解决方案：

http://jsfiddle.net/8vMJA/1/

您需要将检查代码放入事件处理程序中。该事件处理程序侦听提交按钮的单击，如果检查不成功，则阻止提交。

$(document).ready(function(){
    var num = 2;

    $("#submit").on('click', function (event) {
        $(":selected").each(function(){
            if($(this).val()==num){
                alert("Please ensure all fields are selected to submit the form");
                event.preventDefault();
            }
        });
    });
});

【讨论】：

【解决方案2】：

使用以下代码。每次尝试提交表单时都会触发 submit 事件，并且在验证表单之前可以阻止提交。

$(function() {
    $('form').on('submit', function( event ) {
        if( $('select').filter(function() { return this.value == 2; }).length > 0 ) {
            event.preventDefault();
            alert( 'Please ensure all fields are selected to submit the form' );
        }
    });
});

【讨论】：