Question

I’m trying to figure out how to validate a form element with a mix of radio inputs and a text input:

<label>Question?</label>
<input type="radio" class="mandatory" name="questions[1][]" value="1" />answer 1<br/>
<input type="radio" class="mandatory" name="questions[1][]" value="2" />answer 2<br/>
<input class="ignore" type="radio" id="questions[1][]" />Other (please specify)<br/>
<input class="optional mandatory" type="text" name="questions[1][]" value="" />

I’ve figured out how to get the form to behave as expected (select and unselect) with the following code:

$("input.optional").focus(function () {
  var this_name = $(this).attr("name");
  $("input:radio").filter(function() {return $(this).attr('name') == this_name; }).attr('checked', false);
  $("input").filter(function() {return $(this).attr('id') == this_name; }).attr('checked', true);
});
$(':radio').click(function () {
  var this_name = $(this).attr("name");
  $("input").filter(function() {return $(this).attr('id') == this_name; }).attr('checked', false);
  $("input.optional").filter(function() {return $(this).attr('name') == this_name; }).val('');
});

I was hoping I could use the class “mandatory” to validate the mix of radio and text inputs:

$("form .manditory").each(function () {
  $(this).rules("add", {required: true});
});

But it’s not working as expected. With the radio (id=”questions[1][]”) selected, and the text input containing content, the form element is still flagged as invalid.

Suggestions…maybe a better approach?

Thanks in advance.

UPDATE

Sorry, I should have clarified that I’m using the validate plugin:

$("form").validate({ ... });

Answer 1

I figured out a solution.

Basically, I added/removed a validation rule to the text input based on the radio option that was selected, so that the form could not be submitted if they user selected the “other” radio input. When text was inputted, I updated the “other” radio input’s value.

Here’s the code:

<label>Question?</label>
<input type="radio" class="manditory" name="questions[1][]" value="1" />answer1<br/>
<input type="radio" class="manditory" name="questions[1][]" value="2" />answer2<br/>
<input type="radio" class="optional_button manditory" name="questions[1][]" value="" />Other (please specify)<br/>
<input class="optional_input" type="text" id="questions[1][]" value="" />

…and the jQuery:

$("form").validate({ 
    errorPlacement: function(error, element) {
        if (element.hasClass('optional_input') == false){
            error.appendTo(element.prev("label"));
        }
        else {
            element.after(error);
        }
    }
});
$("div#partner_registration form .manditory").each(function () {
    $(this).rules("add", { required: true });
});
$("input:radio").click(function () {
    var this_name = $(this).attr("name");
    if ($(this).hasClass('optional_button')){
        $("input.optional_input").filter(function() {return $(this).attr('id') == this_name; }).focus();
    }
    else {
        $("input.optional_input").filter(function() {return $(this).attr('id') == this_name; }).val("").rules("remove");
    }
});
$("input.optional_input").focus(function () {
    $(this).rules("add", { required: true });
    var this_id = $(this).attr("id");
    $("input:radio").each(function() {
        if($(this).attr('name') == this_id && $(this).hasClass('optional_button') == false) $(this).attr('checked', false);
        if($(this).attr('name') == this_id && $(this).hasClass('optional_button') == true) $(this).attr('checked', true);
    });
});
$("input.optional_input").keyup(function () {
    var this_name = $(this).attr("id");
    var this_val = $(this).val();
    $("input.optional_button").filter(function() {return $(this).attr('name') == this_name; }).val(this_val);
});

Hope that helps