验证插件未验证所有字段 [英] Validation plugin is not validating all fields

问题描述

我正在使用jQuery validate插件进行表单验证.它只是检查第一个字段而已.如果第一个字段验证为true，则为提交表单.这不是在验证其余字段.

I am using the jQuery validate plugin for doing form validation. it's just checking first field only. if first field validation is true then it's submitting form. it's not validating rest fields..

我正在使用bootstrap 3.0

i am using bootstrap 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>

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

I don't know what's going wrong with my code? Please help...

预先感谢

推荐答案

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

You have a typo in your validate options. relues must be rules.

还必须指定名称属性:

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完成错误和有效的样式:

Error and valid stying can be done using this CSS:

.has-error
{
    background-color: rgb(255, 0, 0);
}
.has-success
{
    background-color: rgb(0, 255, 0);
}

这篇关于验证插件未验证所有字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！