Html 验证输入类型为“=”的控制组；电台；

我想验证一个表单，该表单有一个控制组，其输入为

type=“radio”

，如下所示：

<form id="sendMessageFormContainer" action="#">
    @Html.ValidationSummary()
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
            <legend>To:</legend>
            <div id="messageToContainer">
                 <input type="radio" name="radio-choice-1" id="radio-choice-1" value="1" />
                 <label for="radio-choice-1">foo</label>
                 <input type="radio" name="radio-choice-1" id="radio-choice-2" value="2" />
                 <label for="radio-choice-2">bar</label>
            </div>
        </fieldset>
    </div>

//...

    <input id="sendMsgBtn" name="sendMsgBtnName" type="submit" value="Send" />
</form>

<input type="radio" name="radio-choice-1" id="radio-choice-1" value="1" class="required" />
<label for="radio-choice-1">foo</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="2" />
<label for="radio-choice-2">bar</label>

$(document).on('pagebeforeshow', '#index', function(){ 
    $("#sendMessageFormContainer").validate({
        rules : {
            "radio-choice-1" : { required : true }
        },
        messages : {
            "radio-choice-1" : "Please select radio button"
        },
        submitHandler: function (form) {
            alert("Call Send Action");
        }
    });    
    $(document).on('click', '#sendMsgBtn', function(){ 
        $("#sendMessageFormContainer").validate().form();
    });    
});

解决方案1 您需要向任何收音机输入中添加至少一个class=“required”，如下所示：

<form id="sendMessageFormContainer" action="#">
    @Html.ValidationSummary()
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
            <legend>To:</legend>
            <div id="messageToContainer">
                 <input type="radio" name="radio-choice-1" id="radio-choice-1" value="1" />
                 <label for="radio-choice-1">foo</label>
                 <input type="radio" name="radio-choice-1" id="radio-choice-2" value="2" />
                 <label for="radio-choice-2">bar</label>
            </div>
        </fieldset>
    </div>

//...

    <input id="sendMsgBtn" name="sendMsgBtnName" type="submit" value="Send" />
</form>

<input type="radio" name="radio-choice-1" id="radio-choice-1" value="1" class="required" />
<label for="radio-choice-1">foo</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="2" />
<label for="radio-choice-2">bar</label>

$(document).on('pagebeforeshow', '#index', function(){ 
    $("#sendMessageFormContainer").validate({
        rules : {
            "radio-choice-1" : { required : true }
        },
        messages : {
            "radio-choice-1" : "Please select radio button"
        },
        submitHandler: function (form) {
            alert("Call Send Action");
        }
    });    
    $(document).on('click', '#sendMsgBtn', function(){ 
        $("#sendMessageFormContainer").validate().form();
    });    
});

---

工作示例：

谢谢！它起作用了。但是消息错误没有显示为红色，并且在字段下方。。。例如，对于上面显示的控件组，对于输入文本和文本区域，它显示在内部，始终为黑色？我是否应该进行一些定制，以获得如下所示的错误消息：？jQuery Mobile验证的问题是在jQM重新设置HTML内容的样式后它的HTML结构。因此，根据小部件的不同，错误不会总是显示在同一位置。告诉我您希望它显示在哪里？我希望在字段下方以红色显示错误消息。然后您需要创建自己的自定义项，但请注意，要使其正常工作，需要对代码进行一些操作。或者你想让我告诉你怎么做？如果你给我举一些基本的例子，那就太好了。这可能是一个已经存在的例子，只是为了了解如何做。。。