bootstrap jQuery validate plugin.. error placement issue

So i have implemented the jquery validation plugin to my code as shown in my code below, however i have an issue in displaying the error code to be after all the options. at the minute its being placed inside the first button option. Can anyone help change my error placement code in the JavaScript so that the error is placed after all the radio buttons for each group please.

here is my php file containing the form

<form class="form-horizontal" id="Form" action="form.php" method="POST">
    <div class="form-group">
    <label class="col-xs-3 control-label">Gender</label>
    <div class="col-xs-9">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default">
                <input type="radio" name="gender" value="right" /> male
            </label>
            <label class="btn btn-default">
                <input type="radio" name="gender" value="left" /> female
            </label>
        </div>
    </div>
    </div>
    <div class="form-group">
    <label class="col-xs-3 control-label">Height</label>
    <div class="col-xs-9">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default">
                <input type="radio" name="height" value="tall" /> Tall
            </label>
            <label class="btn btn-default">
                <input type="radio" name="height" value="small" /> Small
            </label>
        </div>
    </div>
    </div>
    <div class="form-group">
    <label class="col-xs-3 control-label">Scale</label>
    <div class="col-xs-9">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default">
                <input type="radio" name="scale" value="1" /> 1
            </label>
            <label class="btn btn-default">
                <input type="radio" name="scale" value="2" /> 2
            </label>
            <label class="btn btn-default">
                <input type="radio" name="scale" value="3" /> 3
            </label>
            <label class="btn btn-default">
                <input type="radio" name="scale" value="4" /> 4
            </label>
            <label class="btn btn-default">
                <input type="radio" name="scale" value="5" /> 5
            </label>
        </div>
    </div>
    </div>
   <div class="form-group">
    <div class="col-sm-2 col-sm-offset-4">
        <button type="submit" class="btn btn-danger">Submit</button>
    </div>
    </div>
</form>

And here is the validate javascript code:

<script type="text/javascript">
$("#Form").validate({
    rules: {
        gender: {
            required: true
        },
        height: {
            required: true
        },
        scale: {
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.form-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    },
    submitHandler: function(form) {
    form.submit();
    }
});

printscreen of output

Answers:

Answer

I tried this using bootstrap v3.3.4, jQuery v2.1.4 and validate v1.13.1 and I was able to get the following errorPlacement syntax to work based on how your HTML is structured:

errorPlacement: function(error, element) {
    if (element.is(":radio")) {
        error.insertAfter(element.closest("div"));
    } else {
        error.insertAfter(element);
    }
}

Hope this helps the cause.

Answer

this should work

 errorPlacement: function (error, element) {
                if (element.is(":radio") || element.is(":checkbox")) {
                    error.appendTo(element.parent());
                } else {
                    error.insertAfter(element);
                }
            }

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.