Login/Register
JQuery validation message appearing weirdly between two radio buttons
Asked Answered
javascriptjqueryhtmlvalidationradio-button
O

1

9

I am using JQuery Validation plugin to validate my form. The validation messages for all the fields except radio button are showing properly below the respective field.But for radio button the messages are showing between first two radio buttons.

gender : {
    required : true
    }


<html:radio property="gender" value="1"
        name="formBean" styleId="gender">&nbsp;Male&nbsp;</html:radio>
    <html:radio property="gender" value="0"
        name="formBean" styleId="gender">&nbsp;Female&nbsp;</html:radio>

enter image description here

Is there any way the error message shown after or below the radio buttons?

Thanks in advance.

Oligoclase answered 6/5, 2015 at 16:27 Comment(4)
Could you provide rendered HTML instead of server side markup? Can you replicate issue on jsFiddle? – Alexina
the easiest way you can do is applying CSS to alert message targeting to these radio – Pugging
Have you tried to use a label tag for the error message? Rendered it should look like this: <label for="formBean" class="error" style="display:none;">. It might be, that you need "formBean": { required:true } as a rule instead of gender though. – Gutturalize
create a empty div with gender property to show the validation message in there..you are trying to insert the validation msg inside the html tag using the gender property..separting tags could solve you the issue – Halliard
A
2
<html>
<body>
    <style>
        .errorMsq {
            color: red;
        }
    </style>
    <form>
        <div>
            <input type="radio" name="gender" value="male">male
            <input type="radio" name="gender" value="female">female
        </div>
        <br>
        <button type="button">check</button>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
    <script>
        $('form').validate({
            rules: {
                gender: {required: true},
            },
            errorPlacement: function(label, element) {
                label.addClass('errorMsq');
                element.parent().append(label);
            },
        });
        $('button').click(function () {
            $('form').valid();
        });
    </script>
</body>
</html>

Result should be like:

enter image description here

Arrogant answered 6/5, 2015 at 17:49 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.