好的，所以我正在尝试使用 jQuery Validation 来验证我在模态中的表单。但是，我的 jQuery Validation 甚至根本没有触发，甚至没有错误。我已经调试过了，有一个警告：
没有选择，无法验证，什么也没有返回。
这些是我的代码：
<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);
}
});
我已经尝试了很多解决方案，从修复模态主体内的表单，使用不显眼的库，但它仍然不想开火。请帮助我，一个触发验证的线索就足够了，我会在之后跟进。
谢谢。
尝试在显示模式后立即初始化验证代码。如果你有类似 $('#myModal').open() 的东西，那么你必须在 open 方法之后初始化验证。我相信这与 DOM 操作有关。
**** 编辑 ****
我会在这里留下这个答案，因为我认为其他人可能会使用代码..
但是我自己的问题的答案是调试选项阻止提交操作工作...
我在这里遇到同样的问题。如果有人有答案，我很感兴趣。
我已经设置了模态，然后显示我的模态
setNewWindow('#modal_edit_client_details');
然后在shown.bs.modal之后激活我的validation
$('#modal_edit_client_details').on('shown.bs.modal', function() {
console.log('Preping IND Form');
$('#edit_client_cancel_but').click(function() {
closeWindow();
});
if (window.current_client.identity_type == 'P') {
console.log('Setting up Validation');
$('#indinfo').validate({
debug: true,
rules: {
ind_fn: {
required: true,
minlength: 3
},
ind_ln: {
required: true,
minlength: 3
},
ind_e: {
required: true,
email: true
},
ind_pa1: {
required: true,
minlength: 5
},
ind_sa1: {
required: true,
minlength: 5
}
},
messages: {
ind_fn: {
required: "First Name is Required",
minlength: "First Name does not look valid"
},
ind_ln: {
required: "Surname is Required",
minlength: "Surname does not look valid"
},
ind_e: {
required: "Email is Required",
email: "Does not look like a valid email address"
},
ind_pa1: {
required: "Postal Address is required",
minlength: "Please Provide more information"
},
ind_sa1: {
required: "Street Address is Required",
minlength: "Please Provide more information"
}
},
submitHandler: function(form) {
console.log('We are Here doing the Save');
SaveClientDetails().then(function() {
PresentNewSiteForm(window.current_client.identity_name);
})
},
invalidHandler: function(event, validator) {
ShowModal('Error in Forms', 'Please review the form and correct the highlighted errors', '', false, false, true, 5000);
}
});
}
});结果是表单加载正常，但没有字段级别验证。
提交时验证被激活，错误字段被突出显示，并显示 invalidHandler 弹出窗口。
但是当所有字段都有效时，submitHandler 不会被操作。