Question

我试图验证我的bootstrap网站的联系表单，但我无法使其正常工作。如果我使用此demo中的代码，它可以正常工作但我的代码无法使其正常工作。当我点击提交按钮时，它会刷新页面并且不显示任何消息错误。

这是我的代码：

<form class="form-horizontal" id="contact_form">

                    <div class="form-group control-group">
                        <label for="contact_name" class="col-sm-4 control-label">NAME: </label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control contact-focus" id="contact_name" placeholder="Your name *">
                            </div>
                    </div>

                    <div class="form-group control-group">
                        <label for="contact_email" class="col-sm-4 control-label">EMAIL: </label>
                            <div class="col-sm-8">
                                <input type="email" class="form-control contact-focus" id="contact_email" placeholder="email@example.com *">
                            </div>
                    </div>

                    <div class="form-group control-group">
                        <label for="contact_company" class="col-sm-4 control-label">COMPANY: </label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control contact-focus" id="contact_company" placeholder="Company name">
                            </div>
                    </div>

                    <div class="form-group control-group">
                        <label for="contact_contact" class="col-sm-4 control-label">CONTACT: </label>
                            <div class="col-sm-8">
                                <input type="tel" class="form-control contact-focus" id="contact_contact" placeholder="Your number">
                            </div>
                    </div>


                    <div class="form-group control-group">
                        <label for="contact_message" class="col-sm-4 control-label">MESSAGE: </label>
                            <div class="col-sm-8">
                                <textarea class="form-control fixed_textarea contact-focus" id="contact_message" placeholder="What do you want to say to us ? *" rows="8"></textarea>
                            </div>
                    </div>

                     <div class="form-group control-group">
                        <div class="col-sm-offset-4 col-sm-8">
                            <input type="submit" class="btn btn-default" value="Send Message" />

                        </div>  
                    </div>



                </form>

JS：

$('#contact_form').validate({

    rules:{
        contact_name:{
            required:true,
            minlength:2
        },
        contact_email:{
            required:true,
            email:true
        },
        contact_message:{
            required:true,
            minlength:20
        }
    },

    messages:{
        contact_name:{
            required:"Please insert your name",
            minlength:"Your name must contain at least 2 characters"
        },
        contact_email:{
            required:"Please Insert Your Email Address",
            email:"Please Insert a Valid Email Address"
        },
        contact_message:{
            required:"Please Write Your Message",
            minlenght: "Your Message must contain at least 20 characters"
        }
    }


});

Answer 1

在您的输入中添加name属性，并为其指定id的值。如

 <input type="text" ``` id="contact_name" ``` name="contact_name">

我认为验证器按名称选择输入而不是其ID。

无法使jquery validate.js有效

1 个答案: