bootstrap jQuery验证插件..错误放置问题 [英] bootstrap jQuery validate plugin.. error placement issue

问题描述

所以我已经在我的代码中实现了jquery验证插件，如下面的代码所示，但是我在显示错误代码时遇到了所有选项的问题。在它被放置在第一个按钮选项内的那一刻。任何人都可以帮助我在JavaScript中更改我的错误放置代码，以便在每个组的所有单选按钮之后放置错误。

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.

这是我的包含表单的php文件

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>

这是验证javascript代码：

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

推荐答案

我用<$尝试了这个c $ c> bootstrap v3.3.4 ， jQuery v2.1.4 和验证v1.13.1 我能够根据HTML的结构方式获得以下 errorPlacement 语法：

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.

这篇关于bootstrap jQuery验证插件..错误放置问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！