我有以下表格和js，我不知道为什么它已停止工作。
$('#reporting').validate({
debug: true,
rules: {
inptfnamer: {
required: true
},
inptlnamer: {
required: true
},
inptemailr: {
required: true,
email: true
},
inptnumberr: {
required: true,
number: true
},
r_summary: {
required: true
},
r_description: {
required: true
},
r_requestor_domain: {
required: true
},
r_requestor_domain_other: {
required: {
depends: function()
{
var rdom = $('select[id="r_requestor_domain"]', '#reporting').val();
if(rdom == 100)
{
return true;
}
else{
return false;
}
}
}
},
r_request_type: {
required: true
},
r_project_related: {
required: true
},
r_activity_code: {
required: {
depends: function()
{
var acode = $('select[id="r_project_related"]', '#reporting').val();
if(acode == 'proj_2')
{
return true;
}
else{
return false;
}
}
}
},
r_project_code: {
required: {
depends: function()
{
var pcode = $('select[d="r_project_related"]', '#reporting').val();
if(pcode == 'proj_2')
{
return true;
}
else{
return false;
}
}
}
},
r_frequency_id: {
required: true
},
r_data_source_id: {
required: true
},
r_output_id: {
required: true
},
r_preferred_dist_method_id: {
required: true
}
},
showErrors: function(errorMap, errorList) {
console.log(errorMap);
console.log(errorList);
$.each( this.successList , function(index, value) {
$(value).popover('hide');
});
$.each( errorList , function(index, value) {
console.log(value.message);
var _popover = $(value.element).popover({
trigger: 'manual',
placement: 'top',
content: value.message,
template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"></div></div></div>'
});
_popover.data('bs.popover').options.content = value.message;
$(value.element).popover('show');
});
},
submitHandler: function (form) {
console.log(form);
/*$.ajax({
type: "POST",
url: "requestportal_ajax.php",
data: "action=requestportal&"+$('form.reporting').serialize(),
success: function(msg){
$("#form-reporting").modal('hide');
//location.reload();
$("#notification").html(msg);
},
error: function(){
$("#form-reporting").modal('hide');
$("#notification").html(msg);
}
});*/
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<!-- Modal Reporting -->
<div id="form-reporting" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title"><i class="fa fa-area-chart fa-fw"></i> Reporting Request</h2>
</div>
<form class="reporting" name="reporting" id="reporting">
<!-- Body -->
<div class="modal-body">
<input type="hidden" name="reporting_request[ticket_type]" value="reporting">
<!-- Contact Details Section Heading -->
<h4 class="page-header" style="margin-top: 0;">Requestor Details</h4>
<div class="row-fluid">
<!-- First Name -->
<div class="span6">
<div class="input-group has-feedback">
<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
<input type="text" class="form-control inptfname" name="user[inptfname]" id="inptfnamer" placeholder="First Name" />
</div>
</div>
<!-- Last Name -->
<div class="span6">
<div class="input-group has-feedback" class="span6">
<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
<input type="text" class="form-control inptlname" name="user[inptlname]" id="inptlnamer" placeholder="Last Name" />
</div>
</div>
</div><br/>
<div class="row-fluid">
<!-- Email -->
<div class="span6">
<div class="input-group has-feedback">
<span class="input-group-addon"><i class="fa fa-envelope fa-fw"></i></span>
<input type="text" class="form-control inptemail" name="user[email]" id="inptemailr" placeholder="Email" />
</div>
</div>
<!-- Tel -->
<div class="span6">
<div class="input-group has-feedback">
<span class="input-group-addon"><i class="fa fa-phone fa-fw"></i></span>
<input type="text" class="form-control inptnumber" name="user[phone]" id="inptnumberr" placeholder="Contact Number" />
</div>
</div>
</div><br>
<!-- Request Details Section Heading -->
<h4 class="page-header" style="margin-top: 5px;">Request Details</h4>
<!-- Request Summary -->
<div class="input-group has-feedback">
<span class="input-group-addon"><i class="fa fa-pencil-square-o fa-fw"></i></span>
<input type="text" class="form-control" name="reporting_request[summary]" id="r_summary" placeholder="Summary"/>
</div><br>
<!-- Request Description -->
<div class="input-group has-feedback">
<span class="input-group-addon"><i class="fa fa-pencil-square-o fa-fw"></i></span>
<textarea class="form-control" name="reporting_request[description]" id="r_description" placeholder="Description"></textarea>
</div><br>
<div class="row-fluid">
<div class="span6">
<!-- Requester Domain -->
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-users fa-fw"></i></span>
<select class="form-control" name="reporting_request[requestor_domain]" id="r_requestor_domain" >
<option selected> -- Select Requester Domain -- </option>
</select>
</div>
<div class="form-group">
<input class="form-control other" style="margin-top:10px;" type="text" placeholder="Other Please Specify" name="reporting_request[requestor_domain_other]" id="r_requestor_domain_other" />
</div>
<!-- Project Related -->
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-gbp fa-fw"></i></span>
<select class="form-control" name="reporting_request[project_related]" id="r_project_related">
<option disabled selected>-- Select Project Related --</option>
<option value="No">No (OPEX)</option>
<option value="Yes">Yes (CAPEX)</option>
</select>
</div>
<br>
<!-- Project Related, if yes change in js -->
<div id="codes1">
<div class="form-group">
<input class="form-control" type="text" placeholder="Activity Code" name="reporting_request[activity_code]" id="r_activity_code">
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="Project Code" name="reporting_request[project_code]" id="r_project_code">
</div>
</div>
<!-- data source -->
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-database fa-fw"></i></span>
<select class="form-control" name="reporting_request[data_source_id]" id="r_data_source_id">
<option selected> -- Select Data Source -- </option>
</select>
</div>
<!-- <div class="form-group">
<input class="form-control other" style="margin-top:10px;" type="text" placeholder="Other Please Specify" name="reporting_request[data_source_other]" id="r_data_source_id_other" >
</div>-->
</div><!-- //.span6 -->
<div class="span6">
<!-- Request Type is report type -->
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-bar-chart fa-fw"></i></span>
<select class="form-control" name="reporting_request[request_type]" id="r_request_type">
<option selected> -- Select Report Type -- </option>
</select>
</div><br>
<!-- <div class="form-group">
<input class="form-control other" style="margin-top:10px;" type="text" placeholder="Other Please Specify" name="reporting_request[request_type_other]" id="r_request_type_other" />
</div>-->
<!-- frequency -->
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-clock-o fa-fw"></i></span>
<select class="form-control" name="reporting_request[frequency_id]" id="r_frequency_id">
<option selected> -- Select Frequency Required -- </option>
</select>
</div><br>
<!-- <div class="form-group">
<input class="form-control other" style="margin-top:10px;" type="text" placeholder="Other Please Specify" name="reporting_request[frequency_other]" id="r_frequency_id_other" >
</div>-->
<!-- output -->
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-file-code-o fa-fw"></i></span>
<select class="form-control" name="reporting_request[output_id]" id="r_output_id">
<option selected> -- Select Output Format -- </option>
</select>
</div>
<!-- <div class="form-group">
<input class="form-control other" style="margin-top:10px;" type="text" placeholder="Other Please Specify" name="reporting_request[output_other]" id="r_output_id_other" >
</div>-->
</div><!-- //.span6 -->
</div><!-- //.row-fluid -->
<br>
<!-- reciepents -->
<div class="input-group has-feedback">
<span class="input-group-addon"><i class="fa fa-send-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="CC" name="reporting_request[report_recepients]" id="r_report_recepients">
</div><br>
<!-- preferred_dist_method_id -->
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-truck fa-fw"></i></span>
<select class="form-control" name="reporting_request[preferred_dist_method_id]" id="r_preferred_dist_method_id">
<option selected> -- Select Distribution Method -- </option>
</select>
</div>
<!--<div class="form-group">
<input class="form-control other" style="margin-top:10px;" type="text" placeholder="Other Please Specify" name="reporting_request[preferred_dist_method_other]" id="r_preferred_dist_method_id_other" >
</div>-->
</div><!-- //.modal-body -->
<!-- Footer -->
<div class="modal-footer">
<input class="btn btn-success" type="submit" value="Submit Reporting Request" id="repsubmit">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
答案 0 :(得分：1)
您的规则对象定位于inptfnamer：
$('#reporting').validate({
rules: {
inptfnamer: { // <-
required: true
}, ....
但是，此字段的name不是inptfnamer：
<input name="user[inptfname]" id="inptfnamer" ....
在.validate()方法中，您必须使用该字段的name。由于name包含括号，因此必须将其括在引号中：
$('#reporting').validate({
rules: {
'user[inptfname]': { // <- must be the NAME attribute
required: true
}, ....
对所有字段重复。