JQuery通過電子郵件驗證驗證插件

Question

我目前使用JQuery Validate插件以及一些提示插件來驗證表單。我還需要驗證電子郵件地址，其他只是檢查所有字段已填寫。我熟悉驗證rules函數，但它會導致問題。

一旦電子郵件評估爲無效，在我目前的實施中，所有以下文本字段顯示爲無效（通過生成插件提示），並導致所有後續字段有一個惱人的提示，說this field is required用戶甚至有機會填寫它們。

我想知道是否有方法檢查我的電子郵件驗證功能是否在validate調用中返回了true，如果它不返回true，則認爲表單無效。

後來我將需要實現一個密碼正則表達式函數，它將遵循相同的邏輯。

我的表單驗證

$(".form").validate({ 
      errorPlacement: function(error, element) { 
      }, 
      highlight: function(element, errorClass, validClass) { 
       $(element).css('border', '1px solid red'); 
       $('.addlefttip').qtip({ 
        position: { 
         my: 'middle left', 
         at: 'middle right' 
        }, 
        show: { 
         event: 'focus' 
        }, 
        hide:{ 
         event: 'blur' 
        }, 
        style: { 
          classes: 'qtip-blue qtip-shadow' 
         }, 
         content: { 
          attr: 'alt' 
         }, 
        }); 
        $('.addtoptip').qtip({ 
         position: { 
          my: 'bottom left', 
          at: 'top right' 
         }, 
         show: { 
          event: 'focus' 
         }, 
         hide:{ 
          event: 'blur' 
         }, 
         style: { 
          classes: 'qtip-blue qtip-shadow' 
         }, 
         content: { 
          attr: 'alt' 
         }, 
        }); 
       }, 
       rules: { 
        email: { 
         minlength: 5 
        } 
       }, 
       unhighlight: function(element, errorClass, validClass) { 
        $(element).css('border', '1px solid #ddd'); 
       } 
      }); 

我的電子郵件驗證：

$('.email-field').change(function(){ 
      var email = $(this).val(); 

      var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 

      if(re.test(email)) { 
       document.getElementById('result').innerHTML = '<span style="color:green; font-style:italic; font-weight:normal;"><img src="http://myhousesforsaleindetroit.com/wp-content/uploads/2012/08/green-check-mark.png"> valid'; 
      } else { 
       document.getElementById('result').innerHTML = '<img src="http://upload.wikimedia.org/wikipedia/en/archive/8/89/20070603232424!RedX.png" style="width:15px; margin:-2px 0px 0px 0px;"/> invalid'; 
      } 
     }); 

我明白任何建議！

非常感謝提前！

Answer 1

這個問題是由於我的亮點定義範圍內選擇$('.addlefttip').qtip({...引起的。將選擇器更改爲element可修復所述的問題。

highlight: function(element, errorClass, validClass) { 
       $(element).css('border', '1px solid red'); 
       $(element).qtip({ 
        position: { 
         my: 'middle left', 
         at: 'middle right' 
        }, 
        show: { 
         event: 'focus' 
        ... 
        ... 
        ... 

Answer 2

我想我並不完全理解你的實現。使用表單驗證插件似乎毫無意義，然後用自定義的change處理程序繞過它的一部分。由於您使用的是jQuery Validate插件，爲什麼不使用built-in email rule？

否則，如果您更喜歡您的電子郵件功能，請使用built-in addMethod() method將其變爲自定義規則。

$.validator.addMethod("myCustomRule", function(value, element) { 
     return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(value); 
}, "Custom message for this rule"); 

它實現就像任何其他的規則......

rules: { 
    myfield: { 
     myCustomRule: true 
    } 
} 

---

至於使用qTip2與jQuery驗證，我已經做了這樣的...

$(document).ready(function() { 

    $('#myform').validate({ 
     // any other options & rules, 
     errorPlacement: function (error, element) { 
      $(element).filter(':not(.valid)').qtip({ 
       overwrite: false, 
       content: error, 
       show: { 
        event: false, 
        ready: true 
       }, 
       hide: false 
      }).qtip('option', 'content.text', error); 
     }, 
     success: function (error) { 
      setTimeout(function() { 
       $('form').find('.valid').qtip('destroy'); 
      }, 1); 
     } 
    }); 

}); 

DEMO，jQuery驗證qTip2：http://jsfiddle.net/96AM4/

---

但是最近，我一直在使用Tooltipster，因爲它與jQuery Validate的集成比較乾淨。

$(document).ready(function() { 

    // initialize Tooltipster on form input elements 
    $('#myform input[type="text"]').tooltipster({ 
     trigger: 'custom', // default is 'hover' which is no good here 
     onlyOne: false, // allow multiple tips to be open at a time 
     position: 'right' // display the tips to the right of the element 
    }); 

    // initialize jQuery Validate 
    $('#myform').validate({ 
     // any other options & rules, 
     errorPlacement: function (error, element) { 
      $(element).tooltipster('update', $(error).text()); 
      $(element).tooltipster('show'); 
     }, 
     success: function (label, element) { 
      $(element).tooltipster('hide'); 
     } 
    }); 

}); 

---

側面說明：

最好不要離開callbcak功能空這樣的：

errorPlacement: function(error, element) { 
}, 

用這個代替，如果你的目的是要抑制默認錯誤消息：

errorPlacement: function(error, element) { 
    return false; 
}, 

DEMO，jQuery驗證與Tooltipster：http://jsfiddle.net/kyK4G/