我是编码的新手，并且正在抨击我的大脑并希望你能提供帮助。我在解决我的注册页面时遇到了一些麻烦。我在页面中使用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中列出的contactus-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"
},
}
}
});
});
答案 0 :(得分：1)
我注意到你在同一个表单上使用验证的次数超过了一次。在这种情况下，只有第一个调用生效multiple jquery validators on one form，在您的情况下为$("#contactform").validate();，第二个将被忽略。
答案 1 :(得分：0)
删除一些规则，但保留结构完整，我们可以看到问题......
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
});
});
的兄弟。
看起来应该是这样......
$().ready(function(){...您还应修复DOM ready处理程序。 $("#contactform").validate(...) ＆＃34;不推荐＆＃34; get, post and/or cookie。
正如其他答案中所述，您 不能在同一表单上多次调用 case when company='MUTUAL FUNDS' and (PROD_LONG_NM LIKE '401') or (PROD_LONG_NM LIKE 'SEP') or (PROD_LONG_NM LIKE 'SIMPLE')
then 1 else 0 end as mf_smbiz_conv,
case when company='BANK' and (PROD_LONG_NM LIKE 'BUSINESS')
then 1 else 0 end as bk_smbiz_conv,
case when company='AUTO' and (PROD_LONG_NM LIKE 'COMMERCIAL') or (PROD_LONG_NM LIKE 'ENOL') or (PROD_LONG_NM LIKE 'BUSINESS')
then 1 else 0 end as auto_smbiz_conv,
case when company='FIRE' and (PROD_LONG_NM LIKE 'BUSINESS') or (PROD_LONG_NM LIKE 'COMMERCIAL') or (PROD_LONG_NM LIKE 'CONTRACTORS')
or (PROD_LONG_NM LIKE 'RANCH') or (PROD_LONG_NM LIKE 'FIDELITY') or (PROD_LONG_NM LIKE 'RENTAL')
or (PROD_LONG_NM LIKE 'SURETY') or (PROD_LONG_NM LIKE 'WORKERS')
then 1 else 0 end as fire_smbiz_conv,
case when company='AUTO' then 1 else 0 end as oth_auto_conv,
case when company='FIRE' then 1 else 0 end as oth_fire_conv,
case when company='LIFE' then 1 else 0 end as oth_life_conv,
case when company='HEALTH' then 1 else 0 end as oth_health_conv,
case when company='MUTUAL FUNDS' then 1 else 0 end as oth_mf_conv,
case when company='BANK' then 1 else 0 end as oth_bank_conv
。一个人在HTML中并不重要。 只有第一个实例用于初始化插件 ，所有后续实例都将被忽略。如果您在发布OP时出错，请对其进行编辑，以便我们可以将其作为根本原因进行排除。