Question

    $('#myform').validate({
    // other options & rules
});

我正在使用这些规则来验证myform的各个字段，使用字段名称。现在我还有几个单选按钮，我需要对规则应用验证：“至少需要选择一个单选按钮”。另外我需要提一下.Myform是一个流的表单和stream_details的嵌套表单，因为我的关联就像这个Stream has_many StreamDetail。单选按钮属于嵌套形式。这里的问题是我在检查元素上获得的单选按钮的名称是奇怪的，如“stream [stream_details_attributes] [0] [show_details] [0]”。无法获得如何对此进行验证。我虽然试图在按钮上放一个类并在其上添加规则。虽然不起作用。

Answer 1

有几种方法可以做到这一点。你的OP很难说，但也许＃3就是你需要的......

1。当name是群组中每个广播的相同时...

    <input type="radio" name="radioname" /> <label>Yes</label>
    <input type="radio" name="radioname" /> <label>No</label>
    <input type="radio" name="radioname" /> <label>Maybe</label>

然后，您可以简单地在此名称上声明required规则，并且需要一个群组中的一个无线电。（由于它是type="radio"共享name（同一组），因此首先只能选择一个。）

$('#myform').validate({
    // other options,
    rules: {
        radioname: { // <- NAME of every radio in the same group
            required: true
        }
    }
});

2。当群组中每个广播的name 不同时...

    <input type="radio" name="foo" class="mygroup" /> <label>Yes</label>
    <input type="radio" name="bar" class="mygroup" /> <label>No</label>
    <input type="radio" name="foobar" class="mygroup" /> <label>Maybe</label>

然后，您可以使用属于the plugin's additional-methods.js file的require_from_group规则。第一个参数告诉它需要从组中有多少。

$('#myform').validate({
    // other options,
    rules: {
        foo: {
            require_from_group: [1, '.mygroup']
        },
        bar: {
            require_from_group: [1, '.mygroup']
        },
        foobar: {
            require_from_group: [1, '.mygroup']
        }
    }
});

3。当群组中每个广播的name 不同且您不知道name属性（虽然每个name仍然是强制性的）。

    <input type="radio" name="foo" class="mygroup" /> <label>Yes</label>
    <input type="radio" name="bar" class="mygroup" /> <label>No</label>
    <input type="radio" name="foobar" class="mygroup" /> <label>Maybe</label>

然后，您将使用.rules('add')方法声明规则。此方法可以附加到任何选择器，因此您无需知道 name属性。（但是，即使您未在此处使用name，插件 也要求 ，每个考虑进行验证的输入都包含name。）

$('#myform').validate({
    // other options
});

$('.mygroup').each(function () {
    $(this).rules('add', {
        require_from_group: [1, $(this)]
    });
});

工作演示：http://jsfiddle.net/05qm3r4m/

您可以在.validate()中使用the groups option将错误消息合并为一条消息。然后使用the errorPlacement option将其精确放置在布局中。

结合消息的DEMO：http://jsfiddle.net/05qm3r4m/1/

Answer 2

尝试类似

<input type="radio" name="radioButtonName" value="1" />First
<input type="radio" name="radioButtonName" value="2" />Second

<强>规则：

{
    radioButtonName:"required"    
}

Answer 3

您可以使用此

$(".selector").validate({
rules: {
// simple rule, converted to {required:true}
name: "required",
// compound rule
email: {
required: true,
email: true
}
}
});

对于更多选项，您可以检查jquery validate plugin site

http://jqueryvalidation.org/validate/

Answer 4

检查： -

<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <style type="text/css">
        input.error 
        {
            border: solid 1px red;  
            color: Red;    
        }
    </style>
     <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.2.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#form").validate({
                rules: {
                    accountType: "required"
                },
                messages: {
                    accountType: "You must select an account type"
                }
            });
        });

    </script>
</head>
<body>
    <div>
        <form id="form" method="post" action="/">
            <label>Select an Account Type</label>
            <p>
                <input type="radio" name="accountType" value="1" id="accountType_C" /><label for="accountType_C" >Coder</label>
            </p>
            <p>
                <input type="radio" name="accountType" value="0" id="accountType_S" /><label for="accountType_S">Surreptitious Ninja</label>
            </p>
            <input type="submit" />
        </form>
    </div>
</body>
</html>

单选按钮的jquery验证规则

4 个答案:

您可以使用此

对于更多选项，您可以检查jquery validate plugin site