Home/ Questions/Q 9171621
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T16:11:17+00:00

I have two radio buttons in my form for gender selection. I am using

  • 0

I have two radio buttons in my form for gender selection.

I am using this plugin for validation.
When I apply validation on radio button, this plugin places the error label between the two radio buttons.

here is the fiddle: http://jsfiddle.net/wyFQp/1/

HTML:

<head>
    <body>
        <form id='registration_form'>
            <input type="radio" value="M" name="gender" class="gender" id="genderm"
            />Male
            <input type="radio" value="F" name="gender" class="gender ml_10" id="genderf"
             />Female
            <input type='submit' />
        </form>
    </body>

How can I place the error label after both radio buttons? Or at least on some decent place?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add an error label in your markup where you’d like the error to show:

    <label class="error" generated="true" for="gender" style="display:none;"></label>

    Fiddle

    When associating it with radio inputs, the error label’s for attribute corresponds to radios’ name – this facilitates things as radios with the same name will only have one radio selected at a time and one error label associated with the group.
    For text inputs (and select/textarea/type="checkbox") though, the id must be used.

    Another less hackish way is to use the errorPlacement option with an error container, e.g.:

    <div id="genderErrorContainer"></div>

    $("#registration_form").validate({
    rules: {[...]},
    messages: {[...]},
    submitHandler: fn,
    errorPlacement: function(error, element) {
        if (element.prop('name') === 'gender') {
            error.appendTo('#genderErrorContainer');
        }
    }
});

    Updated fiddle

    Of course, you can also use other DOM manipulation methods to add the error element to the DOM, for example .append, .prepend, .after, insertAfter, .before, .insertBefore combined with DOM traversal based on the element that originated the validation error, which may not require extra markup depending on your HTML structure.

    • 0