jquery 验证器与 select 不工作

Question

我刚刚开始使用 jquery 验证插件，但未能使其按预期工作。

我在 Fiddle 上有一个示例，位于 http://jsfiddle.net/GWABv/3/

谁能告诉我我到底做错了什么？我只是想要求用户在下拉列表中选择一个选项，但即使我没有选择一个值，它也会返回说表单有效。

HTML:

<form id="roadForm" method="get" action="">
    <p>
        <label for="editRoad_ProjectClassification">
            <em class="red">*</em> Project Classification:
        </label>
        <select id="editRoad_ProjectClassification" name="editRoad_ProjectClassification"  title="Please select something!" validate="required:true">
            <option value="">Please select</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </p>
</form>
<label class="FUNC_saveRecord">
    <span class="icon iconSave"></span>
    <span class="title">Save</span>
</label>

JavaScript:

$('.FUNC_saveRecord').click(function() {
    saveRecord();
});


function saveRecord() {
    var roadFormValidator = $('#roadForm').validate();
    if (!roadFormValidator.valid()) {
        roadFormValidator.showErrors();
    }
    else {
        alert('form is valid');
    }
}

Answer 1

您遇到了一些问题:

1. <罢工> form开始标记 ( <focm> ) 拼写错误 看起来已修复
2. 您需要添加 class='required'属性到字段。 validate=required:true不会这么做。
3. 您无需调用validate每次click发生。只需调用 document.ready 一次即可就足够了。
4. 无需手动调用showErrors在这种情况下。该插件会自动为您执行此操作。

以下是我更新您的代码的方法:

HTML:

<form id="roadForm" method="get" action="">
<p>
    <label for="editRoad_ProjectClassification">
        <em class="red">*</em> Project Classification:
    </label>
    <select id="editRoad_ProjectClassification" name="editRoad_ProjectClassification"  title="Please select something!" class="required">
        <option value="">Please select</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</p>
</form>
<label class="FUNC_saveRecord">
    <span class="icon iconSave"></span><span class="title">Save</span>
</label>

JavaScript:

$("#roadForm").validate();

$('.FUNC_saveRecord').click(function() {
    saveRecord();
});


function saveRecord() {
    var roadFormValidator = $('#roadForm');
    if (roadFormValidator.valid()) {
        alert('form is valid');
    }
}

更新示例: http://jsfiddle.net/hRjJM/