好吧，所以我试图使用jQuery验证来验证我的表格在模式内。但是，我的jQuery验证甚至根本不触发，甚至没有错误。我已经使用了调试，并且有一个警告：
未选择任何内容，无法验证，不返回任何内容。
这些是我的代码：
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Form Add Question Category</h4>
</div>
<form id="form_input" method="post" action="">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<input type="hidden" id="submit_type" name="submit_type" value="address_insert"/>
<div class="form-group">
<div class="col-md-6 col-sm-12 col-xs-12">
<label for="txtDeviceID">Device ID</label>
<input type="text" class="form-control" id="txtDeviceID" name="txtDeviceID" placeholder="Device ID"/>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<label for="txtPassword">Password</label>
<input type="text" class="form-control" id="txtPassword" name="txtPassword" placeholder="Password"/>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-sm-12 col-xs-12">
<label>Employee</label>
<select class="select2_employee" name="select2_employee" style="width:100%"></select>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-sm-12 col-xs-12">
<label>Branch</label>
<select class="select2_branch" name="select2_branch" style="width:100%"></select>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-6">
<label for="txtIPLocal">IP Local</label>
<input type="text" class="form-control" id="txtIPLocal" name="txtIPLocal" placeholder="IP Local"/>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<label for="txtPortLocal">Port Local</label>
<input type="text" class="form-control" id="txtPortLocal" name="txtPortLocal" placeholder="Port Local" />
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-6">
<label for="txtIPPublic">IP Public</label>
<input type="text" class="form-control" id="txtIPPublic" name="txtIPPublic" placeholder="IP Public"/>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<label for="txtPortPublic">Port Public</label>
<input type="text" class="form-control" id="txtPortPublic" name="txtPortPublic" placeholder="Port Public"/>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-6">
<label for="txtIPAlternative">IP Alternative</label>
<input type="text" class="form-control" id="txtIPAlternative" name="txtIPAlternative" placeholder="IP Alternative"/>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<label for="txtPortAlternative">Port Alternative</label>
<input type="text" class="form-control" id="txtPortAlternative" name="txtPortAlternative" placeholder="Port Alternative"/>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" value='Submit' class="btn btn-md btn-primary" >Submit</button>
<button type="button" class="btn btn-md btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
javascript：
var validate_start = $("#myModal #form_input").validate({
debug: true,
ignore: [],
rules: {
txtDeviceID: {
required: true
// lettersOnlySpace: true,
// minlength: 5,
// maxlength: 15
},
txtPassword: {
required: true
},
select2_employee: {
required: true
},
select2_branch: {
required: true
},
txtIPLocal: {
required: true
},
txtPortLocal: {
required: true,
number: true,
range: [1, 65535]
},
txtIPPublic: {
required: true
},
txtPortPublic: {
required: true,
number: true,
range: [1, 65535]
},
txtIPAlternative: {
required: true
},
txtPortAlternative: {
required: true,
number: true,
range: [1, 65535]
}
},
// messages: {
// txtDeviceID: {
// required: "Input required."
// },
// txtPassword: {
// required: "Input required."
// },
// select2_employee: {
// required: "Input required."
// },
// select2_branch: {
// required: "Input required."
// },
// txtIPLocal: {
// required: "Input required."
// },
// txtPortLocal: {
// required: "Input required."
// },
// txtIPPublic: {
// required: "Input required."
// },
// txtPortPublic: {
// required: "Input required."
// },
// txtIPAlternative: {
// required: "Input required."
// },
// txtPortAlternative: {
// required: "Input required."
// }
// },
errorPlacement: function (error, element) {
console.log("validate success!");
error.appendTo(element.siblings('.error_validation'));
},
submitHandler: function (form) {
console.log(form);
// $.ajax({
// url: $("#submit_type").val(),
// type: 'POST',
// dataType: 'JSON',
// data: function (params) {
// console.log("parameter");
// console.log(params);
// return JSON.stringify($(form).serialize());
// },
// // data: $(form).serialize(),
// success: function () {
// // $(form).html("<div id='message'></div>");
// // $('#message').html("<h2>Your request is on the way!</h2>")
// // .append("<p>someone</p>")
// // .hide()
// // .fadeIn(1500, function () {
// // $('#message').append("<img id='checkmark' src='images/ok.png' />");
// // });
// }
// });
return false; // required to block normal submit since you used ajax
},
invalidHandler: function (event, validator) {
// 'this' refers to the form
var errors = validator.numberOfInvalids();
console.log("error " + errors);
}
});
我已经尝试了许多解决方案，从将模型固定在模态主体中，使用不显眼的库，但是它仍然不希望触发。请帮助我，一个触发验证的线索就足够了，之后我会关注。
谢谢。
答案 0 :(得分：1)
尝试在模态显示后立即初始化验证代码。如果您有类似$（'＃myModal'）。open（）的内容，则必须在open方法之后初始化验证。我相信这与DOM操作有关。