Bootstrap Form JQuery验证消息位置

Question

我正在为引导程序表单进行JQuery验证，一切似乎都是正确的，除了这个：

我不确定如何强制性别验证消息显示在输入上方，就像其他消息一样。

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>

JQuery代码：

    $("#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"
    }
});

欢迎任何帮助！

Answer 1

最好创建一个div，以便在每个字段后打印错误消息。您可以为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'
                    },

                }
            },
        }
    });
});