jQuery 使用输入掩码进行验证
jQuery validation with input mask
有这个问题,带有指定掩码(作为占位符)的表单输入未通过 jQuery 验证验证为空。
我使用:
- https://github.com/RobinHerbots/jquery.inputmask
- https://github.com/1000hz/bootstrap-validator
(在这种情况下使用 jQuery 本机验证)
一些奇怪的行为:
- 具有属性
required
的输入被验证(由 jQuery)为非空,因此有效,但另一方面,输入不被视为 "not empty" 并且不检查其他验证规则(这是 validator.js)
- 当我在输入字段中写入内容然后将其删除时,我收到
required
错误消息
谁能给我一些提示?
编辑:
相关代码:
HTML/PHP:
<form enctype="multipart/form-data" method="post" id="feedback">
<div class="kontakt-form-row form-group">
<div class="kontakt-form">
<label for="phone" class="element">
phone<span class="required">*</span>
</label>
</div>
<div class="kontakt-form">
<div class="element">
<input id="phone" name="phone" ' . (isset($user['phone']) ? 'value="' . $user['phone'] . '"' : '') . ' type="text" maxlength="20" class="form-control" required="required" data-remote="/validator.php">
</div>
</div>
<div class="help-block with-errors"></div>
</div>
</form>
JS:
$(document).ready(function() {
$('#phone').inputmask("+48 999 999 999");
$('#feedback').validator();
});
这不完全是解决方案,但是...
更改一些等效的输入掩码解决了问题。
虽然还远未达到完美:(
解释:
其他屏蔽库,没有提到这两个奇怪的行为,所以可以验证字段。
我成功地使用了 RobinHerbots 的输入掩码 (3.3.11),通过激活 clearIncomplete,jQuery 验证。参见 Input mask documentation dedicated section:
Clear the incomplete input on blur
$(document).ready(function(){
$("#date").inputmask("99/99/9999",{ "clearIncomplete": true });
});
Personnaly,如果可能的话,我更喜欢通过 HTML 数据属性来设置它:
data-inputmask-clearincomplete="true"
缺点是:失去焦点时会删除部分输入,但我可以接受。所以也许你也是...
编辑:如果您需要将掩码验证添加到其余的 jQuery 验证过程中,您可以通过以下方式模拟 jQuery 验证错误执行以下操作:
// Get jQuery Validate validator currently attached
var validator = $form.data('validator');
// Get inputs violating masks
var $maskedInputList
= $(':input[data-inputmask-mask]:not([data-inputmask-mask=""])');
var $incompleteMaskedInputList
= $maskedInputList.filter(function() {
return !$(this).inputmask("isComplete");
});
if ($incompleteMaskedInputList.length > 0)
{
var errors = {};
$incompleteMaskedInputList.each(function () {
var $input = $(this);
var inputName = $input.prop('name');
errors[inputName]
= localize('IncompleteMaskedInput_Message');
});
// Display each mask violation error as jQuery Validate error
validator.showErrors(errors);
// Cancel submit if any such error
isAllInputmaskValid = false;
}
// jQuery Validate validation
var isAllInputValid = validator.form();
// Cancel submit if any of the two validation process fails
if (!isAllInputValid ||
!isAllInputmaskValid) {
return;
}
// Form submit
$form.submit();
将这两个库组合在一起时,我遇到了同样的问题。
实际上这里有一张类似的票:https://github.com/RobinHerbots/Inputmask/issues/1034
这里是RobinHerbots
提供的解决方案:
$("#inputPhone").inputmask("999.999.9999", {showMaskOnFocus: false, showMaskOnHover: false});
当掩码 focus/hover 存在时,验证器假定它不为空。
只需关闭焦点并将遮罩悬停即可解决问题。
我解决了这个问题:
phone_number: {
presence: {message: '^ Prosimy o podanie numeru telefonu'},
format: {
pattern: '(\(?(\+|00)?48\)?)?[ -]?\d{3}[ -]?\d{3}[ -]?\d{3}',
message: function (value, attribute, validatorOptions, attributes, globalOptions) {
return validate.format("^ Nieprawidłowa wartość w polu Telefon");
}
},
length: {
minimum: 15,
message: '^ Prosimy o podanie numeru telefonu'
},
},
有这个问题,带有指定掩码(作为占位符)的表单输入未通过 jQuery 验证验证为空。
我使用:
- https://github.com/RobinHerbots/jquery.inputmask
- https://github.com/1000hz/bootstrap-validator (在这种情况下使用 jQuery 本机验证)
一些奇怪的行为:
- 具有属性
required
的输入被验证(由 jQuery)为非空,因此有效,但另一方面,输入不被视为 "not empty" 并且不检查其他验证规则(这是 validator.js) - 当我在输入字段中写入内容然后将其删除时,我收到
required
错误消息
谁能给我一些提示?
编辑: 相关代码:
HTML/PHP:
<form enctype="multipart/form-data" method="post" id="feedback">
<div class="kontakt-form-row form-group">
<div class="kontakt-form">
<label for="phone" class="element">
phone<span class="required">*</span>
</label>
</div>
<div class="kontakt-form">
<div class="element">
<input id="phone" name="phone" ' . (isset($user['phone']) ? 'value="' . $user['phone'] . '"' : '') . ' type="text" maxlength="20" class="form-control" required="required" data-remote="/validator.php">
</div>
</div>
<div class="help-block with-errors"></div>
</div>
</form>
JS:
$(document).ready(function() {
$('#phone').inputmask("+48 999 999 999");
$('#feedback').validator();
});
这不完全是解决方案,但是...
更改一些等效的输入掩码解决了问题。
虽然还远未达到完美:(
解释:
其他屏蔽库,没有提到这两个奇怪的行为,所以可以验证字段。
我成功地使用了 RobinHerbots 的输入掩码 (3.3.11),通过激活 clearIncomplete,jQuery 验证。参见 Input mask documentation dedicated section:
Clear the incomplete input on blur
$(document).ready(function(){
$("#date").inputmask("99/99/9999",{ "clearIncomplete": true });
});
Personnaly,如果可能的话,我更喜欢通过 HTML 数据属性来设置它:
data-inputmask-clearincomplete="true"
缺点是:失去焦点时会删除部分输入,但我可以接受。所以也许你也是...
编辑:如果您需要将掩码验证添加到其余的 jQuery 验证过程中,您可以通过以下方式模拟 jQuery 验证错误执行以下操作:
// Get jQuery Validate validator currently attached
var validator = $form.data('validator');
// Get inputs violating masks
var $maskedInputList
= $(':input[data-inputmask-mask]:not([data-inputmask-mask=""])');
var $incompleteMaskedInputList
= $maskedInputList.filter(function() {
return !$(this).inputmask("isComplete");
});
if ($incompleteMaskedInputList.length > 0)
{
var errors = {};
$incompleteMaskedInputList.each(function () {
var $input = $(this);
var inputName = $input.prop('name');
errors[inputName]
= localize('IncompleteMaskedInput_Message');
});
// Display each mask violation error as jQuery Validate error
validator.showErrors(errors);
// Cancel submit if any such error
isAllInputmaskValid = false;
}
// jQuery Validate validation
var isAllInputValid = validator.form();
// Cancel submit if any of the two validation process fails
if (!isAllInputValid ||
!isAllInputmaskValid) {
return;
}
// Form submit
$form.submit();
将这两个库组合在一起时,我遇到了同样的问题。
实际上这里有一张类似的票:https://github.com/RobinHerbots/Inputmask/issues/1034
这里是RobinHerbots
提供的解决方案:
$("#inputPhone").inputmask("999.999.9999", {showMaskOnFocus: false, showMaskOnHover: false});
当掩码 focus/hover 存在时,验证器假定它不为空。 只需关闭焦点并将遮罩悬停即可解决问题。
我解决了这个问题:
phone_number: {
presence: {message: '^ Prosimy o podanie numeru telefonu'},
format: {
pattern: '(\(?(\+|00)?48\)?)?[ -]?\d{3}[ -]?\d{3}[ -]?\d{3}',
message: function (value, attribute, validatorOptions, attributes, globalOptions) {
return validate.format("^ Nieprawidłowa wartość w polu Telefon");
}
},
length: {
minimum: 15,
message: '^ Prosimy o podanie numeru telefonu'
},
},