Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery validation message appearing weirdly between two radio buttons

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.

like image 756
SHEFEEK A Avatar asked May 06 '15 16:05

SHEFEEK A


1 Answers

<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

like image 169
cn007b Avatar answered Nov 02 '22 09:11

cn007b