Bootstrap Form JQuery validation message position

Question

I am working on JQuery validation for a bootstrap form and everything seems to go right, except this:

I am not sure of how to force gender validation message to display above the input, like the other ones.

Html Code:

   <div class="form-group">
    <label>Gender:</label>
    <label class="radio-inline" id="gender">
        <input name="radioBtn" type="radio" value="male">Male
    </label>
    <label class="radio-inline">
        <input name="radioBtn" type="radio" value="female">Female
    </label>
    </div>

JQuery Code:

    $("#boostrapForm").validate({
    rules: {
        firstname: { required: true },
        lastname: { required: true },
        email: {
            required: true,
            email: true
        },
        occupationSelect: { required: true },
        radioBtn: { required: true }            
    },

    messages: {
        firstname: "Please enter your firstname",
        lastname: "Please enter your lastname",
        email: "Please enter a valid email address",
        occupationSelect: "Please make a selection",
        radioBtn: "Please make a selection"
    }
});

Any help is welcome!

You'll have to use custom `highlight`, `unhighlight`, `errorPlacement`, etc. functions with Bootstrap. Search SO, look at the linked duplicate(s) above, and make an attempt at solving this yourself before posting a question. Thanks. — Sparky, Oct 16 '17 at 01:38

score 2 · Answer 1 · answered Oct 15 '17 at 17:13

It is better to create a div just to print an error message after every field. You can write another function just for the radioBtn.

HTML:

<div class="form-group">
        <label>Gender:</label>
        <label class="radio-inline" id="gender">
            <input name="radioBtn" type="radio" value="male">Male
        </label>
        <label class="radio-inline">
            <input name="radioBtn" type="radio" value="female">Female
        </label>
        </div>

        <div class="messageContainer"></div>

javascript :

$(document).ready(function() {
    $('#boostrapForm').formValidation({
        framework: 'bootstrap',
        err: {
            container: function($field, validator) {
                return $field.parent().next('.messageContainer');
            }
        },

        fields: {
            radioBtn: {
                validators: {
                    notEmpty: {
                        message: 'This is required field and cannot be empty'
                    },

                }
            },
        }
    });
});

The `.formValidation()` method/plugin has absolutely nothing to do with the jQuery Validate plugin, which is what the OP is asking about. — Sparky, Oct 16 '17 at 01:28

Bootstrap Form JQuery validation message position

1 Answers1