Question

我刚开始使用jquery validate插件，但无法按预期工作。

的小提琴上有一个例子

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

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

这里有一些问题：

~~form在开始标记中拼写错误（<focm>）~~ 看起来已修复
您需要在该字段中添加class='required'属性。 validate=required:true不会这样做。
每次validate发生时，您都无需致电click。只需在document.ready上调用一次即可。
在这种情况下，无需手动调用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/

jquery验证器，选择不工作

1 个答案: