[英]jQuery validation with input mask
具有指定掩码的输入(作为占位符)的此问题未通过jQuery验证验证为空。
我用:
一些奇怪的行为:
required
属性的输入被验证(通过jQuery)为非空且因此有效,但另一方面输入不被视为“非空”并且未检查其他验证规则(这是通过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();
});
这不完全是解决方案,但......
更改某些等效的输入掩码可以解决问题 。
尽管如此,仍然远非完美:(
说明:
其他掩蔽库,没有提到这两个奇怪的行为,因此可以验证字段。
通过激活clearIncomplete ,我设法使用RobinHerbots的Inputmask(3.3.11)和jQuery Validate。 请参阅输入掩码文档专用部分 :
清除模糊的不完整输入
$(document).ready(function(){
$("#date").inputmask("99/99/9999",{ "clearIncomplete": true });
});
Personnaly,如果可能,我更喜欢通过HTML数据属性设置:
data-inputmask-clearincomplete="true"
缺点是:当焦点丢失时, 部分输入被删除 ,但我可以忍受。 也许你也是......
编辑 :如果需要将掩码验证添加到jQuery Validate进程的其余部分,可以通过执行以下操作来模拟jQuery Validate错误:
// 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});
当掩码焦点/悬停在那里时,验证器假定它不是空的。 只需转动焦点并将面罩悬停,就可以解决问题。
我解决了这个问题:
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'
},
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.