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>

这应该是display：none;默认情况下。

然后在您的错误功能中，您将更新此区域。

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'
        }
    }
});

Happy.js单选按钮验证

2 个答案: