我正在使用 JQuery 成功验证我的表单。
我在表单中的出生日期字段中添加了屏蔽输入。屏蔽输入插件来自:https://github.com/RobinHerbots/jquery.inputmask
加载时，出生日期字段的屏蔽输入正常工作。如果提交表单并且表单中其他字段的该字段验证失败:出生日期字段将被删除其屏蔽字符分隔符，并且屏蔽输入不再起作用。
我正在使用 jQuery，jQuery 验证插件，输入掩码来自 https://github.com/RobinHerbots/jquery.inputmask和 Bootstrap。
这是我的一些表单，显示了出生日期字段。我的表单还有许多其他字段。
<form name="add_contact_quick" id="add_contact_quick" method="POST" class="horizontal-form">
<div class="form-body">
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
You have some form errors. Please check below.
</div>
<div class="alert alert-success display-hide">
<button class="close" data-close="alert"></button>
Your form validation is successful!
</div>
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Date of Birth</label>
<div class="input-icon right">
<i class="fa"></i>
<input id="birthdate" name="birthdate" type="text" class="form-control">
</div>
</div>
</div>
<div class="modal-footer form-actions right">
<button type="button" class="btn default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn blue"><i class="fa fa-check"></i> Save</button>
</div
</form>
这是我的 javascript，它将验证表单并在验证失败时显示错误。
<script>
$(document).ready(function() {
var form = $('#add_contact_quick');
var error = $('.alert-danger', form);
var success = $('.alert-success', form);
$('#add_contact_quick').validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block help-block-error', // default input error message class
focusInvalid: true, // do not focus the last invalid input
ignore: "", // validate all fields including form hidden input
rules: {
friends_call_me: {
required: true
},
first: {
required: true
},
last: {
required: true
},
email: {
email: true
},
birthdate: {
date: true
}
},
invalidHandler: function (event, validator) { //display error alert on form submit
success.hide();
error.show();
Metronic.scrollTo(error, -200);
},
errorPlacement: function (error, element) { // render error placement for each input type
var icon = $(element).parent('.input-icon').children('i');
icon.removeClass('fa-check').addClass("fa-warning");
icon.attr("data-original-title", error.text()).tooltip({'container': 'body'});
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.form-group').removeClass("has-success").addClass('has-error'); // set error class to the control group
},
unhighlight: function (element) { // revert the change done by highlight
},
success: function (label, element) {
var icon = $(element).parent('.input-icon').children('i');
$(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
icon.removeClass("fa-warning").addClass("fa-check");
},
submitHandler: function(form) {
//form[0].reset();
success.show();
error.hide();
Metronic.scrollTo(success, -200);
$.ajax({
url: "ajax_insert.php?table=contacts",
type: form.method,
data: $(form).serialize(),
success: function(response) {
//response here if data response
if (response.redirect) {
// data.redirect contains the string URL to redirect to
window.location.href = reponse.redirect;
}
}
});
}
});
$("#birthdate").inputmask("99/99/9999");
});
</script>
如果验证失败，我需要一种方法将该掩码保留在输入框中。我很困惑为什么输入掩码会因为验证失败而从输入框中完全清除!
无论在生日输入框中输入什么值，它的输入掩码都会被删除，只剩下数字。当我尝试再次编辑生日框时，没有像页面加载时那样应用输入掩码。
最佳答案
感谢您对此发表评论。
这让我发疯。
我采纳了你的建议并做了一个 fiddle 。
jsfiddle.net/epyo7gn5/
有趣的是，当我制作 fiddle 时，它成功了!
这让我意识到我使用的 inputmask 插件是旧版本。使用更新的插件解决了整个问题。
我觉得有点傻，但我学到了宝贵的一课。我不知道该项目使用了“稍微”旧的版本，但如果没有这个线程和建议，我永远不会弄清楚它。
谢谢。
关于javascript - jQuery:验证错误后，我的输入掩码功能在现场不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28661123/