JQuery验证模式问题
JQuery Validation Modal Issues
我是编码新手，正在为此绞尽脑汁，希望您能提供帮助。我有一点麻烦解决我的注册页面。我使用JQuery验证和页面内的模态。我有我的验证工作正确，但似乎不能得到它与模态工作。我的验证编码有什么问题，我在这里错过了什么，以保持它的工作?
<!doctype html>
<html>
<head>
<script src="/Root/JS/jquery-1.11.2.js"></script>
<script src="/Root/JS/bootstrap.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"
type="text/javascript"></script>
<script src="/Root/JS/contactus-form.js"></script>
<link href="/Root/CSS/newstyle.css" rel="stylesheet" type="text/css">
<link href="/Root/CSS/bootstrap/bootstrap.css" rel="stylesheet" type="text/css">
<link href="/Root/CSS/bootstrap/bootstrap-theme.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<!-- Modal -->
<div class="modal fade" id="signIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h1 class="modal-title" id="myModalLabel">Registration</h1>
</div> <!-- close modal header -->
<div class="modal-body">
<div id="formWrap" >
<form id="contactform" name='test' class="form-horizontal contactus" method="post" action='' accept-charset='UTF-8'>
<p><label class="error control-label">* Required Field.</label></p>
<div class="form-group">
<label class="col-xs-3 control-label">Full name<span class="error">*</span></label>
<div class="col-xs-4" id="firstname">
<input type="text" class="form-control" name="firstname" placeholder="First Name"/>
</div>
<div class="col-xs-4" id="lastname">
<input type="text" class="form-control" name="lastname" placeholder="Last Name"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Address</label>
<div class="col-xs-4" id="address">
<input type="text" class="form-control" name="address" placeholder="Address"/>
</div>
<div class="col-xs-4" id="address2">
<input type="text" class="form-control" name="address2" placeholder="Address (2)"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label"></label>
<div class="col-xs-3" id="city">
<input type="text" class="form-control" name="city" placeholder="City"/>
</div>
<div class="col-xs-2" id="state">
<select class="form-control" name="state"/>
<option>IN</option>
<option>AL</option>
<option>AR</option>
<option>AZ</option>
<option>CA</option>
<option>CO</option>
<option>CT</option>
<option>DE</option>
<option>FL</option>
<option>GA</option>
<option>IA</option>
<option>ID</option>
<option>IL</option>
<option>KS</option>
<option>KY</option>
<option>LA</option>
<option>MA</option>
<option>MD</option>
<option>ME</option>
<option>MI</option>
<option>MN</option>
<option>MO</option>
<option>MS</option>
<option>MT</option>
<option>NC</option>
<option>ND</option>
<option>NE</option>
<option>NH</option>
<option>NJ</option>
<option>NM</option>
<option>NV</option>
<option>NY</option>
<option>OH</option>
<option>OK</option>
<option>OR</option>
<option>PA</option>
<option>RI</option>
<option>SC</option>
<option>SD</option>
<option>TN</option>
<option>TX</option>
<option>UT</option>
<option>VA</option>
<option>VT</option>
<option>WA</option>
<option>WI</option>
<option>WV</option>
<option>WY</option>
</select>
</div>
<div class="col-xs-3" id="zip">
<input type="text" class="form-control" name="zip" placeholder="Zip Code"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Phone number<span class="error">*</span></label>
<div class="col-xs-3" id="cell">
<input type="text" class="form-control" name="cell" placeholder="cell"/>
</div>
<div class="col-xs-3" id="home">
<input type="text" class="form-control" name="home" placeholder="home"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Email address<span class="error">*</span></label>
<div class="col-xs-5" id="email">
<input type="email" class="form-control" name="email"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Password<span class="error">*</span></label>
<div class="col-xs-5" id="password">
<input type="password" class="form-control" name="password"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Confirm Password<span class="error">*</span></label>
<div class="col-xs-5" id="passwordconfirm">
<input type="password" class="form-control" name="passwordconfirm"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Real Estate Interest<span class="error">*</span></label>
<div class="col-xs-5">
<div class="checkbox" id="realestate">
<label><input type="checkbox" value="Purchase"/>Purchase</label>
<label><input type="checkbox" value="Sell" />Sell</label>
<label><input type="checkbox" value="Rent" />Rent</label>
<br>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 g-recaptcha" data-sitekey="###"></div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" id="contactbtn" class="btn btn-primary" name="register" value="Submit">Submit</button>
</div>
</div>
</form>
<script>
$("#contactform").validate();
</script>
</div> <!--close formWrap -->
</div> <!--close modal-body-->
</div><!-- close modal content -->
</div><!-- close modal-dialog -->
</div> <!-- close modal-fade -->
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" id="register" data-toggle="modal" data-target="#signIn">Register Here</button>
</div><!-- end .content -->
</div><!-- end .container -->
</body>
</html>
这是我在html中列出的contact -form.js。
//Form Validation for Modal
$().ready(function(){
$("#contactform").validate({
rules: {
firstname: "required",
lastname: "required",
cell: {
required: true,
minlength: 10,
},
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6,
maxlength: 32
},
passwordconfirm: {
required: true,
minlength: 6,
maxlength: 32,
equalTo: "#password"
},
realestate: {
required: true,
rangelength: [1,3]
},
messages: {
firstname: "Please enter your first name",
lastname: "Please enter last name",
cell: {
required: "Please enter a cell number",
minlength: "Please include area code",
},
password: {
required: "Please enter a password",
minlength: "Password must be between 6 and 32 characters", maxlength: "Password must be between 6 and 32 characters"
},
passwordconfirm: {
required: "Please re-enter password",
minlength: "Password must be between 6 and 32 characters",
maxlength: "Password must be between 6 and 32 characters",
equalTo: "Password confirm does not email the password"
},
realestate:{
required: "Please select at least one"
},
}
}
});
});
我注意到您在同一表单上多次使用验证。在这种情况下，只有第一个调用将对一个表单(在您的示例中是$("#contactform").validate();)上的多个jquery验证器生效，第二个调用将被忽略。
删除一些规则，但保持结构完整，我们可以看到问题所在…
$().ready(function(){
$("#contactform").validate({
rules: {
// .... other rules clipped
realestate: {
required: true,
rangelength: [1,3]
},
messages: {
// .... other rules clipped
realestate:{
required: "Please select at least one"
},
}
}
});
});
你把messages选项放在rules选项的里面，从而破坏了插件。
在.validate()方法中，messages应该是rules 的兄弟。
应该是这样的…
$(document).ready(function(){
$("#contactform").validate({
rules: {
// .... other rules
realestate: {
required: true,
rangelength: [1,3]
}
}, // <- close 'rules' option
messages: {
// .... other rules
realestate:{
required: "Please select at least one"
}
} // <- close 'messages' option
});
});
您还应该修复DOM就绪处理程序。根据jQuery文档，$().ready(function(){...是"不推荐"。
正如在另一个答案中已经说过的，不能在同一窗体上多次调用$("#contactform").validate(...)。在HTML中并不重要。只有第一个实例被用来初始化插件，所有后续的实例将被忽略。如果您在发布OP时犯了错误，请编辑它，以便我们可以排除这是根本原因。
相关文章：
- 正则表达式匹配模式或匹配其他所有内容 - 匹配优先级问题
- CKEditor内部的jQuery模式问题与按钮
- 挖空和显示模块模式的数据绑定问题
- j查询模式窗口，刷新父问题
- Type=文本模式问题
- Jquery Dialog模式问题
- 旋转jqueryUI模式的问题
- Javascript策略设计模式问题
- 多个引导模式的滚动问题
- SVG模式动画和背景淡入问题
- Javascript 模块模式问题
- 我应该如何在JS中使用揭示模块模式，传递引用，并避免加载顺序问题
- 为此模式编写正则表达式时遇到问题
- 自定义模式脚本 - Safari 和 IE 问题
- ESLint “max-len” 忽略模式的问题
- 模式对话框中 ui-grid 的大小调整问题不正确
- 可堆叠弹出窗口引导模式关闭问题
- JavaScript 模块模式上下文问题
- 更新现有数据时检索引导模式表单中的复选框字段的值时出现问题
- DOM加载后定义的触发器事件-JIRA打开新的问题模式
