如何使用带有单选按钮的jquery-plugin“内联表单验证引擎”(需要一个选项)?

时间:2013-06-26 07:39:29

标签: javascript model-view-controller jquery-plugins knockout.js jquery-validation-engine

现在我正在开发一个使用“内联表单验证引擎2.6.2”的项目,C.Dugas和O.Refalo的jQuery插件(因为这里有很多人最了解它)。最重要的是,我们正在重新编写许多页面以使用knockout.js。

现在我的问题: 我的用例确定需要选择一个选项,并且还要求用户明确选择该选项 - 尤其是“我没有工作”选项 - 因此我建议使用该选项选项作为默认选项是不可接受的。

从我通过给定的jquery-plugin的原始文档中发现,我得出结论,我的输入需要属性 type =“radio” data_validation_engine =“validate [required] group”

根据这些信息,我最终得到了这个代码来创建我的radiobuttons:

<div data-bind="foreach: radioButtonOptions.Company, visible: true" style="">
            <div>
                <input type="radio" data_validation_engine="validate[required] radio" name="Company" data-bind="value: Value, checked: $root.model.Company, attr: { id: 'Company'+Value() }" data-errormessage-value-missing="Please choose your employer." data-prompt-target="ym-message-Company" value="0" id="Company0">
                <label data-bind="attr: { for: 'Company'+Value() }, text:Text" for="Company0">I don't have a job!</label>
            </div>

            <div>
                <input type="radio" data_validation_engine="validate[required] radio" name="Company" data-bind="value: Value, checked: $root.model.Company, attr: { id: 'Company'+Value() }" data-errormessage-value-missing="Please choose your employer." data-prompt-target="ym-message-Company" value="1" id="Company1">
                <label data-bind="attr: { for: 'Company'+Value() }, text:Text" for="Company1">Softdrink Company</label>
            </div>

            <div>
                <input type="radio" data_validation_engine="validate[required] radio" name="Company" data-bind="value: Value, checked: $root.model.Company, attr: { id: 'Company'+Value() }" data-errormessage-value-missing="Please choose your employer." data-prompt-target="ym-message-Company" value="2" id="Company2">
                <label data-bind="attr: { for: 'Company'+Value() }, text:Text" for="Company2">Food Company</label>
            </div>
        </div>

所以这将最终出现在3个标记良好且未被选中的RadioButton中。

我的提交按钮将在发送帖子之前检查表单的有效性:

$("#submitButton").click(function (event) {
    if (!$('#inputForm').validationEngine('validate'))
        return false;
    // submit per ajax ...
});

从而阻止在验证失败时提交。

这适用于任何“验证[必需]” - 我已经在选择列表和文本框上设置的规则,甚至通过我的DateTime Editor-Template的小扩展,它将日期分成3个不同的输入并在onchange中重新组合第四个隐藏的领域。

但由于某种原因 - 我没有看到 - 它不适用于我的单选按钮列表。

有没有人遇到过这个插件的类似问题,并且能够解决它或任何人偶然有一个好主意如何尝试找到问题...我现在不得不承认我觉得有点卡住

提前获取任何可以提供解决方案的帮助和/或建议!

1 个答案:

答案 0 :(得分:0)

抱歉,我的代码生成中有错字。我的生成器写了“data_validation_engine”而不是“data-validation-engine”。可悲的是,我只是没有看到我的代码和插件官方文档页面的示例代码之间的区别。但是 - 在leonhart的评论中触发 - 仔细研究引擎源代码我终于意识到了错字。 再次感谢Leonhart!