Validate a controlgroup with input of type="radio"

Question

I want to validate a form that have a controlgroup with inputs of type="radio" like this:

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

I'm using validate() method to validate the rest of the elements, but I don't know which rule should I use to check that at least one radio button should be selected:

$(document).on("pageshow", function () {

        $("#sendMessageFormContainer").validate({
            rules: {
                //???
            },
            messages: {
                //...
            },
            submitHandler: function (form) {
                alert("Call Send Action");
            }
        });
    });

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

Solution 1

You need to add at least one class="required" to anyone of your radio inputs, like this:

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

Working example: http://jsfiddle.net/Gajotres/a8cJA/

Solution 2

Or you can do it like this:

$(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();
    });    
});

Working example: http://jsfiddle.net/Gajotres/HwQeY/

edited Jun 20 '20 at 09:12

Community

1
1

answered May 17 '13 at 11:55

Gajotres

57,309
16
102
130

Thank you! It works. But the message error isn't shown in red and below the fields... For instance, for the controlgroup it is shown above, and for input texts and textarea it appears inside, always black? Should I do some customization to get the errors message to show like this:http://www.jquery4u.com/forms/basic-jquery-form-validation-tutorial/ ? – amp May 17 '13 at 13:47
Problem with jQuery Mobile validation is its HTML structure after jQM restyle the HTML content. So error will not always show at the same place depending on a widget. Tell me where would you like it to show? – Gajotres May 17 '13 at 13:50
I would like to show the error message below the field, in red. – amp May 17 '13 at 13:53
Then you would need to create your own customization, but be aware that it will take some playing with code to make it work right. Or do you want me to show you how to do it? – Gajotres May 17 '13 at 13:54
If you point me to some basic example it would be great. It can be an already existant example, just to understand how to do it... – amp May 17 '13 at 14:04
Give me some time to test it here, every field is different in jQM form. I have a working example for select menu but it will not work here. – Gajotres May 17 '13 at 14:06

Validate a controlgroup with input of type="radio"

1 Answers1

Solution 1

Solution 2