我有一个表单,其中包含必填字段,也是可选字段。我正在使用语义UI的表单验证行为来验证字段。
但是,我要实现的是,表单验证行为仅在可选字段中包含值时才对其进行验证。
一个可选字段示例:
<div class="field">
<label>First name</label>
<input type="text" name="first_name" placeholder="First name">
</div>
必填字段示例:
<div class="required field">
<label>E-mail address</label>
<input type="text" name="email" placeholder="E-mail address">
</div>
我通过省略empty
验证规则进行了尝试,但这没有用。
表单验证行为中是否有内置的东西可以帮助我实现这一目标,或者我需要为可选字段编写自定义验证?
更新:此功能已在1.2.0版中实现。optional
可以使用相同的标志:https : //semantic-ui.com/behaviors/form.html#optional-fields
低于1.2.0版的语义的先前版本和解决方案:
通过扩展语义UI表单验证行为,我设法为可选字段制定了可行的解决方案。
首先,我optional
向每个规则集添加了一个标志。这可以设置两种true
或false
:
firstname: {
identifier: "first_name",
optional: true,
rules: [
{
type: "regex[^[a-zA-Z -]+$]",
prompt: "First name can only consist of letters, spaces and dashes"
}
]
}
然后,我搜索了处理每个字段验证的函数,并在其中添加了一条if语句来扩展它,以检查该optional
标志是否设置为true
且该值是否为空。如果条件为真,则跳过针对空白字段的验证,并返回为有效。
该函数可以在未压缩的4600ish行附近找到,semantic.js
或搜索函数注释:
// takes a validation object and returns whether field passes validation
field: function(field) {
var
$field = module.get.field(field.identifier),
fieldValid = true,
fieldErrors = []
;
if(field.optional && $.trim($field.val()) == ""){
module.debug("Field is optional and empty. Skipping", field.identifier);
return true;
}
if(field.rules !== undefined) {
$.each(field.rules, function(index, rule) {
if( module.has.field(field.identifier) && !( module.validate.rule(field, rule) ) ) {
module.debug('Field is invalid', field.identifier, rule.type);
fieldErrors.push(rule.prompt);
fieldValid = false;
}
});
}
if(fieldValid) {
module.remove.prompt(field, fieldErrors);
$.proxy(settings.onValid, $field)();
}
else {
formErrors = formErrors.concat(fieldErrors);
module.add.prompt(field.identifier, fieldErrors);
$.proxy(settings.onInvalid, $field)(fieldErrors);
return false;
}
return true;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句