Jquery 验证插件未验证所有字段
我正在使用jQuery验证插件进行表单验证。只检查第一个字段。如果第一个字段验证为true,则它正在提交表单。它没有验证rest字段 我正在使用Bootstrap3.0Jquery 验证插件未验证所有字段,jquery,jquery-validate,Jquery,Jquery Validate,我正在使用jQuery验证插件进行表单验证。只检查第一个字段。如果第一个字段验证为true,则它正在提交表单。它没有验证rest字段 我正在使用Bootstrap3.0 <script type="text/javascript"> $(document).ready(function(){ $('#contact').validate({ rules: { firstname: { required:
<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>
$(文档).ready(函数(){
$(“#联系人”)。验证({
规则:{
名字:{
要求:正确,
最小长度:5,
},
用户电子邮件:{
要求:正确,
}
}
});
})
你的名字
你的电子邮件
联系方式
类型
调查
抱怨
反馈
其他
消息
发送
我不知道我的代码出了什么问题?请帮忙
提前感谢您的验证选项中有输入错误。关系必须是规则 还必须指定名称属性: 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>
拨弄
使用此CSS可以执行错误和有效的样式设置:
.has-error
{
background-color: rgb(255, 0, 0);
}
.has-success
{
background-color: rgb(0, 255, 0);
}
除了拼写错误。 如果你正在使用这个插件。 您缺少输入的name属性
<input type="email" class="form-control" placeholder="Enter Your Email" id="useremail" name="useremail"/>
根据文档,您必须为每个需要验证的元素分配“name”属性,并使用指定验证规则,即name=“firstname”
我建议即使你没有使用上面提到的插件也尝试一下 您在CSS中错误地使用了规则和关系。@我已经更改了它。但同样的问题…你有没有检查控制台有没有错误?很高兴!请记住将此标记为您的答案。谢谢,还有一个问题,当字段中出现错误时,如何添加类?成功的方法也是一样的?
$('#useremail')。addClass('error')
表示错误,而$('#useremail')。removeClass('error')。addClass('valid')
表示成功。我知道如何添加和删除类,但我的问题是应该在哪里编写它?为了成功,我们把它写在成功里面:{}。。如果我没有弄错,jquery验证应该自动添加它。。还有一个问题,当字段中出现错误时,如何添加类?同样的成功之道?小提琴已经更新。默认情况下,jquery验证会添加错误类和有效类。我在.validate()方法中询问我应该在哪里添加css类。我正在使用Bootstrap3.0,所以我想添加css类“has error”和“has success”。我刚刚更新了Fiddle,请看一下。。成功它运行得很好,但是错误呢?让我们来看看
<input type="email" class="form-control" placeholder="Enter Your Email" id="useremail" name="useremail"/>