如何检查是否选择了表单选择以提交表单?

时间:2014-05-22 02:59:21

标签: javascript php jquery forms select

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

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

2 个答案:

答案 0 :(得分:3)

使用以下代码。每次尝试提交表单时都会触发提交事件,并且可以阻止提交,直到表单被验证为止。

$(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' );
        }
    });
});

答案 1 :(得分:0)

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

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();
            }
        });
    });
});