语义UI表单验证 - 仅在值非空时验证特定的表单字段

Question

我有一个表单，其中包含必需的字段以及可选的字段。我正在使用Semantic 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> 

我给一个尝试ommiting的empty验证规则，但没有奏效。

是否有内置的表单验证行为，可以帮助我实现这一点，还是我需要为我的可选字段编写自定义验证？

Answer 1

更新：此功能目前已在1.2.0版本中实现。同样optional标志可用于：http://semantic-ui.com/behaviors/form.html#optional-validation-fields

上一页anwser和解决方案的语义版本< 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; 
} 

Answer 2

你可以很容易地使用JQuery验证插件。 尝试在

http://jqueryvalidation.org/