Bootstrap 模式中的 jQuery 验证不会触发
Posted
技术标签:
【中文标题】Bootstrap 模式中的 jQuery 验证不会触发【英文标题】：jQuery Validation inside Bootstrap modal doesn't fire 【发布时间】：2019-04-08 14:05:56 【问题描述】：好的，所以我正在尝试使用 jQuery Validation 来验证我在模态中的表单。但是，我的 jQuery Validation 甚至根本没有触发，甚至没有错误。我已经用debug了，有警告：
未选择任何内容，无法验证，不返回任何内容。
这些是我的代码：
<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>
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);
);
我已经尝试了很多解决方案，从修复模态体内的表单到使用 unobtrusive library，但它仍然不想触发。请帮助我，触发验证的一条线索就足够了，我会跟进。
谢谢。
【问题讨论】：
您需要在此处的第一个示例中添加验证规则，getbootstrap.com/docs/4.1/components/modal - 将$('#myInput').trigger('focus') 替换为您的代码。
@TiesonT.，谢谢它与晚期 DOM 创建有关，或多或少你给我的链接，给了我解决这个问题的想法
【参考方案1】：
尝试在模态显示后立即初始化验证代码。如果你有类似 $('#myModal').open() 的东西，那么你必须在 open 方法之后初始化验证。我相信这与 DOM 操作有关。
【讨论】：
你是对的！这都是关于在模态显示后发生的 DOM 操作以上是关于Bootstrap 模式中的 jQuery 验证不会触发的主要内容，如果未能解决你的问题，请参考以下文章
jquery配合Bootstrap中的表单验证插件bootstrapValidator使用方法
JQuery Validate 不适用于 Bootstrap Carousel 中的表单