Question

我的问题是我的表单验证代码无法正常工作。我需要一些帮助，请问导致代码无效的原因。我通过观看youtube教程获得我的代码，但我的工作正在进行。

我使用bootstrap 3和jquery验证插件1.12.0

HTML：

<form>
<div class="container">
    <div class="row">
    <div class="col=md-12">
    <div class="form-horizontal">
        <div class="form-group form-control-group">
            <label class="col-sm-2 control-label" for="firstname">Name:</label>
                <div class="col-sm-4">
                    <input class="form-control" name="firstname" type="text" />
                </div>
        </div>

        <div class="form-group form-control-group">
            <label class="col-sm-2 control-label" for="lastname">Lastname:</label>
                <div class="col-sm-4">
                    <input class="form-control" name="lastname" type="text" />
                </div>
        </div>

        <button type="submit" class="col-sm-offset-2 btn btn-primary input-lg">Submit</button>

    </div>
    </div>
    </div>
</div>
</form>

脚本：

<script type="text/javascript">
        $('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.col-sm-4').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});
</script>

Answer 1

编辑：根据对OP的评论，这是正确的答案。 OP只是忘记将他的代码包装在DOM ready事件处理程序中。显然，他对我的投票表示不满意。由于最初的封闭原因在技术上是不正确的，我投票重新开放。

您需要将代码括在DOM Ready event handler中。否则，当jQuery试图操纵它时，HTML还不存在。

<script type="text/javascript">
    $(document).ready(function() {  // <- DOM is ready for manipulation

        // your validate code here
        $('form').validate({
        ..... 

    });
</script>

您的代码：http://jsfiddle.net/T98Jm/

Answer 2

用于调用插件的脚本链接和脚本块可以放在关闭正文标记之前，代码按原样运行。

需要帮助我的jquery验证表单

2 个答案: