Question

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

这是我的php文件，其中包含表单

<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代码：

<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

Answer 1

我使用bootstrap v3.3.4，jQuery v2.1.4和validate v1.13.1尝试了此操作，并且我能够根据您的HTML结构如何使用以下 errorPlacement 语法：

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

希望这有助于事业。

Answer 2

这应该有效

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

bootstrap jQuery验证插件..错误放置问题

2 个答案: