語義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/