2

我正在使用 jQuery validate 插件进行表单验证。它只是检查第一个字段。如果第一个字段验证为真，则它正在提交表单。它没有验证其余字段..

我正在使用引导程序 3.0

  <script type="text/javascript"> 
$(document).ready(function(){
    $('#contact').validate({
       rules: {
           firstname: {
               required: true,
               minlength: 5,
           },
           useremail: {
               required: true,
           }
       }
    });
})
</script>
   <form action="" method="" id="contact">
            <div class="form-group">
                <label> Your Name </label>
                <input type="text" class="form-control" placeholder="Enter Your Name" id="firstname" required="" minlength="5"/>
            </div>

            <div class="form-group">
                <label> Your E-mail </label>
                <input type="email" class="form-control" placeholder="Enter Your Email" id="useremail" required=""/>
            </div>

            <div class="form-group">
                <label> Contact Detail </label>
                <input type="text" class="form-control" placeholder="Enter Contact Number" id="mobile" minlength="10" maxlength="10" required=""/>
            </div>
            <div class="form-group">
                <label> Type</label>
                <select class="form-control">
                <option> Inquiry </option>
                <option> Complaints </option>
                <option> Feedback </option>
                <option> Others </option>
            </select>
                </div>
            <div class="form-group">
                <label> Message</label>
                <textarea class="form-control" rows="3" cols="5" placeholder="Enter Your Message Here..." id="message" minlength='10' required=""></textarea>
            </div>
            <button type="submit" class="btn btn-primary btn-lg"> Send</button>
        </form>

我不知道我的代码出了什么问题？请帮忙...

提前致谢

4

2 回答 2

6

您的验证选项中有错字。relues 必须是规则。

还必须指定名称属性：

HTML

<form action="" method="" id="contact">
    <div class="form-group">
        <label>Your Name</label>
        <input type="text" class="form-control" placeholder="Enter Your Name" name="firstname" required="" minlength="5" />
    </div>
    <div class="form-group">
        <label>Your E-mail</label>
        <input type="email" class="form-control" placeholder="Enter Your Email" name="useremail" required="" />
    </div>
    <div class="form-group">
        <label>Contact Detail</label>
        <input type="text" class="form-control" placeholder="Enter Contact Number" name="mobile" minlength="10" maxlength="10" required="" />
    </div>
    <div class="form-group">
        <label>Type</label>
        <select class="form-control">
            <option>Inquiry</option>
            <option>Complaints</option>
            <option>Feedback</option>
            <option>Others</option>
        </select>
    </div>
    <div class="form-group">
        <label>Message</label>
        <textarea class="form-control" rows="3" cols="5" placeholder="Enter Your Message Here..." id="message" minlength='10' required=""></textarea>
    </div>
    <button type="submit" class="btn btn-primary btn-lg">Send</button>
</form>

Javascript

$(document).ready(function () {
    $('#contact').validate({
        rules: {
            firstname: {
                required: true,
                minlength: 5,
            },
            useremail: {
                required: true,
            }
        },
        errorClass : 'has-error',
        validClass : 'has-success',
        highlight:function(element, errorClass, validClass) {
            $(element).parents('div').addClass(errorClass).children().removeClass(errorClass);
            $(element).parents('div').removeClass(validClass).children().removeClass(validClass);
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).parents('div').removeClass(errorClass).children().removeClass(errorClass);
            $(element).parents('div').addClass(validClass).children().removeClass(validClass);
        }
    });
})

在这里提琴

错误和有效的样式可以使用这个 CSS 来完成：

.has-error
{
    background-color: rgb(255, 0, 0);
}
.has-success
{
    background-color: rgb(0, 255, 0);
}
于 2013-10-23T12:40:38.640 回答
3

除了拼写错误。如果你使用这个插件Jquery 验证。您缺少输入的名称属性。

<input type="email" class="form-control" placeholder="Enter Your Email" id="useremail" name="useremail"/>

根据文档，您必须为每个需要验证的元素分配“名称”属性，并使用 ie 指定验证规则name="firstname"。

即使您没有使用提到的插件，我也建议您尝试一下。

于 2013-10-23T12:48:55.860 回答