Happy.js单选按钮验证

Question

这是我的单选按钮列表：

<ul>
    <li>
        <input id="radio_1" type="radio" name="radio-button" />
        <label for="radio_1">Radio 1</label>
    </li>
    <li>
        <input id="radio_2" type="radio" name="radio-button" />
        <label for="radio_2">Radio 2</label>
    </li>
</ul>

我正在通过Happy.js (http://happyjs.com/)验证这些无线电输入。我在试着检查是否有收音机被检查过。如果两者都没有选中，请显示单一错误消息。

问题是，Happy.js为每个无线电输入生成错误消息。

这是小提琴-- http://jsfiddle.net/HhZtF/

Answer 1

问题在于您的错误函数。

function getError(error) {
            return $('<div id="' + error.id + '" class="hint error">' + error.message + '</div>');
        }

您应该更新一个“状态”div ID。

例如，在需要错误的地方有一个div。

<div id="formError"></div>

这应该是显示:无；默认情况下。

然后，在错误函数中，您将更新此区域。

function getError(error) {
    $('#formError').append( '<span class="error">This is an error - something is missing</span>' );
    $('#formError').show(); // This will display the error box. 
    }

这样的东西会有帮助的。当然，你需要做的更多，但你应该明白这个想法。

这也假设您也在使用jQuery，但是您将它作为您的标记之一添加，所以我冒昧地认为它是理所当然的。

Answer 2

happy.js提供errorTarget方法。您可以使用它指定错误位置。

errorTarget (String)：在选择插入错误html的位置时，使用选择器代替输入元素本身。错误html将插入.after()此选择器

最终代码

<ul id="single-error">
    <li>
        <input id="radio_1" type="radio" name="radio-button" />
        <label for="radio_1">Radio 1</label>
    </li>
    <li>
        <input id="radio_2" type="radio" name="radio-button" />
        <label for="radio_2">Radio 2</label>
    </li>
</ul>

然后在你的js里

$('#form').isHappy({
    fields: {
        ' input[name=radio-button]': {
            required: 'sometimes',
            message: 'Error',
            test: function () {
                return $('input[name=radio-button]').is(':checked');
            },
            errorTarget: '#single-error'
        }
    }
});