2012-12-18 27 views
0

現在我的表單正在使用以下規則完美地工作,在我的表單輸入的右側添加帶有綠色勾號標記或紅色錯誤消息的標籤:jQuery /驗證 - 複選框的不同錯誤/成功高亮規則

highlight: function(label) { 
      $(label).closest('.form-element').addClass('error') 
      .closest('.form-element').removeClass('success');; 
     }, 
     success: function(label) { 
      label 
      .text('OK!').addClass('valid') 
      .closest('.form-element').addClass('success'); 
     }, 

及相關CSS是:

#jqvForm label.valid { 
    width: 16px; 
    height: 16px; 
    background: url("../images/tick.png") center center no-repeat; 
    display: inline-block; 
    text-indent: -9999em !important; 
    position: absolute; 
} 
#jqvForm label.error { 
    color: red; 
    display: inline; 
    float: none; 
    font-size:11px; 
    font-weight: bold; 
    margin-left: 10px; 
    text-align: left; 
    padding: 2px 8px; 
    margin-top: 2px; 
} 

然而 - 我有一個複選框的頁面,用戶必須同意條款&條件上。在它旁邊輸入錯誤消息或刻度標記看起來非常糟糕。

有沒有辦法驗證爲複選框設置不同的高亮/成功功能?或者我最好不使用驗證這個盒子,而是使用其他的東西來確保盒子被檢查?

+0

感謝您的幫助的輸入。如果有人幫助或指出我正確的方向,我已將答案標記爲已接受。如果不是的話,我已經回去記錄我發現的問題的解決方案。 – Steve

回答

1

options documentation它說超越亮點來決定哪些領域和如何突出,因此,如果您的T + C複選框有一類「myCheckbox」你可以做這樣的事情

success: function (label) { 
    if (label.hasClass('myCheckbox')) { 
     // do something with the checkbox 
    } 
    else { 
     // do something with other fields 
    } 
}, 
highlight: function (element, errorClass) { 
    var v = $(element); 
    if (v.hasClass('myCheckbox')) { 
     // do something with the checkbox 
    } 
    else { 
     // do something with other fields 
    } 
}