Javascript 单选按钮的jquery验证规则_Javascript_Jquery_Radio Button_Jquery Validate

Javascript 单选按钮的jquery验证规则

javascript jquery

Javascript 单选按钮的jquery验证规则,javascript,jquery,radio-button,jquery-validate,Javascript,Jquery,Radio Button,Jquery Validate,我使用这些规则来验证myform中使用这些字段名的各个字段。现在我还有几个单选按钮，我需要使用规则对其应用验证：“至少需要选择一个单选按钮”。我还需要提到这一点。Myform是一个用于流的表单，也是一个用于流详细信息的嵌套表单，因为我的关联就像这个流有许多流详细信息一样。单选按钮属于嵌套形式。这里的问题是我在inspect元素上得到的单选按钮的名称有点奇怪，比如“stream[stream\u details\u attributes][0][show\u details][0]”。无法获取如何

我使用这些规则来验证myform中使用这些字段名的各个字段。现在我还有几个单选按钮，我需要使用规则对其应用验证：“至少需要选择一个单选按钮”。我还需要提到这一点。Myform是一个用于流的表单，也是一个用于流详细信息的嵌套表单，因为我的关联就像这个流有许多流详细信息一样。单选按钮属于嵌套形式。这里的问题是我在inspect元素上得到的单选按钮的名称有点奇怪，比如“stream[stream\u details\u attributes][0][show\u details][0]”。无法获取如何对此应用验证。我试图在按钮上添加一个类，并在其上添加规则。不过没用。

像这样试试看

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

你可以用这个有关更多选项，您可以查看jquery验证插件站点

检查以下内容：-

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


指数
输入错误
{
边框：实心1px红色；
颜色：红色；
}
$（函数（）{
$（“#表格”）。验证({
规则：{
accountType:“必需”
},
信息：{
accountType:“您必须选择一种帐户类型”
}
});
});
选择帐户类型

编码员


鬼鬼祟祟的忍者

有几种方法可以做到这一点。从你的OP很难判断，但也许你需要的是#3

1.当组中每个收音机上的

名称都相同时
<!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>

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



2.当组中每个收音机的名称不同时
<!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>

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



3.当组中每个收音机上的名称不同，并且您不知道名称
属性时（尽管每个收音机上的名称仍然是必需的）
工作演示：
您可以在.validate（）
中使用，将错误消息合并为一条消息。然后使用将其精确放置在布局中
带有组合消息的演示：
实际上，我有一个表单是为同一模型的两个对象构建的。i、 e.StreamDetails有两种类型，并且为这两种类型中的每种类型构建表单（Stream接受流的嵌套属性），因此相同的单选按钮在两种不同的对象表单中有两个名称。您需要向我们显示相关的HTML。一个组中的所有单选按钮是否包含相同的名称
？我动态创建了如下单选按钮
<代码>
我该如何处理？
$('#myform').validate({
    // other options,
    rules: {
        radioname: { // <- NAME of every radio in the same group
            required: true
        }
    }
});

    <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>

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

    <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>

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

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