jQuery验证插件过早显示验证消息

时间:2011-05-21 12:28:21

标签: javascript jquery validation forms

我有一个搜索表单,其中显示了不同的复选框组,具体取决于用户在下拉菜单中选择的内容。我想使用jQuery验证插件检查用户是否(a)在下拉列表中选择了某些内容,并且(b)选中了至少一个复选框。

我已经让这个工作了,除了复选框的验证消息表现得很奇怪。用户可以在下拉列表中选择一个没有问题的值,但是当用户单击页面上的任何(甚至是空白区域)时,将显示复选框的验证错误消息。有谁知道这可能导致什么?

这是我的验证插件的JS代码。我选择将所有验证消息显示在下拉列表旁边(其名称为'to'),而不是复选框旁边(所有都具有class ='from_checkbox')。

$(document).ready(function(){
    // Method for verifying that at least one checkbox has been checked
    jQuery.validator.addMethod("atLeastOneChecked", function(value, element, params) { 
        return $('.from_checkbox:checked').length > 0; 
    }, jQuery.format("From?"));

    // Tell jQuery validation plugin to validate the search form with the proper rules
    $("#search_form").validate({
        rules: {
            'to': { 
                required: true, 
                atLeastOneChecked: true
            }
        }, 
        messages: {
            'to': {
                required: "To?"
            }
        }
    });
});

很多html都是由php生成的,但输出看起来像这样:

<form action="results.php" method="post" id="search_form">
    <table>
        <tr>
            <td>Destination</td>
            <td>
                <select name="to" onchange='changeFromDiv(options[selectedIndex].value)'>
                    <option disabled="disabled" selected value="">--select--</option>
                    <option value="1">Country 1</option>
                    <option value="2">Country 2</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2" id="from_label">Which cities can you travel from?</td> 
        </tr>
        <tr>
            <td colspan="2">
                <div style="display:none" class="from_div" id="from_1">
                    <input name="from[3]" type="checkbox" value="3" class="from_checkbox" /> City 3<br />
                    <input name="from[4]" type="checkbox" value="4" class="from_checkbox" /> City 4<br />
                    <input name="from[8]" type="checkbox" value="8" class="from_checkbox" /> City 8<br />
                </div>
                <div style="display:none" class="from_div" id="from_2">
                    <input name="from[1]" type="checkbox" value="1" class="from_checkbox" /> City 1<br />
                    <input name="from[6]" type="checkbox" value="6" class="from_checkbox" /> City 6<br />
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" id="submit_button" value="Find best route" onclick="showLoading()" />
            </td>
        </tr>
    </table>
</form>

1 个答案:

答案 0 :(得分:2)

初始化插件时,只需包含“onfocusout”选项的设置:

$("#search_form").validate({
    rules: {
        'to': { 
            required: true, 
            atLeastOneChecked: true
        }
    }, 
    messages: {
        'to': {
            required: "To?"
        }
    },
    onfocusout: false
});

这将告诉插件不要对涉及的元素的“模糊”事件执行验证检查。它会等到表单提交。还有一个“onkeyup”标志,由于您不使用文本输入,因此可能与您无关。