如何在defaultValue的可選字段上使用jQuery Validator自定義方法？

我使用最新版本的jQuery Validator plugin以及jQuery（1.6.2）。如何在defaultValue的可選字段上使用jQuery Validator自定義方法？

在我的可選字段爲電話號碼，我有一個defaultValue。

HTML：

<input type="text" class="autoclear blur" value="your telephone number" name="Phone" />

我安裝了用於驗證電話號碼作爲每this thread一個自定義的方法。這個想法是，即使該字段是可選的，我仍然希望驗證它是否/何時輸入文本。

的jQuery/JavaScript的：

$(document).ready(function() { 

    var nameMsg = "Please enter your full name.", 
     emailMsg = "Please enter your email address.", 
     emailMsgV = "This is not a valid email address.", 
     commentsMsg = "Please enter your comments."; 

    $.validator.addMethod('phone', function (value, element) { 
     return this.optional(element) || /^[01]?[- .]?\(?[2-9]\d{2}\)?[- .]?\d{3}[- .]?\d{4}$/.test(value); 
}, 'This is not a valid number.'); 

    $('#contactForm').validate({ 
     onkeyup: false, 
     validClass: 'valid', 
     rules: { 
      Name: { 
       required: true 
      }, 
      email: { 
       required: true, 
       email: true 
      }, 
      Phone: { 
       required: false, 
       phone: true 
      }, 
      Comments: { 
       required: true 
      } 
     }, 
     messages: { 
      Name: nameMsg, 
      email: { 
       defaultInvalid: emailMsg, 
       required: emailMsg, 
       email: emailMsgV 
      }, 
      Comments: commentsMsg 
     }, 
     success: function(error) { 
      setTimeout(function() { // Use a mini timeout to make sure the tooltip is rendred before hiding it 
       $('#contactForm').find('.valid').qtip('destroy'); 
      }, 1); 
     }, 
     submitHandler: function(form) { 
      $('#contactForm .autoclear').each(function() { 
       if (this.value === this.defaultValue) { 
        this.value = ''; 
       } 
      }); 
      form.submit(); 
     }, 
     errorPlacement: function(error, element) { 
      $(element).filter(':not(.valid)').qtip({ 
       overwrite: false, 
       content: error, 
       position: { 
        my: 'left center', 
        at: 'right center'       
       }, 
       show: { 
        event: false, 
        ready: true 
       }, 
       hide: false 
      }).qtip('option', 'content.text', error); 
     } // closes errorPlacement 
    }) // closes validate()  

}); // closes document.ready()

的問題是，因爲我對這個可選字段有defaultValue是越來越驗證了。

phone的自定義方法是否可以編輯，如果該字段留空，它將忽略該字段上的defaultValue？

我試着用if/then來圍繞正則表達式，但這似乎並不奏效。

想到它是如何工作的，我知道這是錯誤的方法...所以現在我迷路了。

來源

2011-10-11 Sparky

你是否看了HTML5佔位符屬性？ http://davidwalsh.name/html5-placeholder顯然這只是一個解決方案，如果你不關心舊瀏覽器。 –

@AndrewWhitaker，這是完全酷，但這個網站支持IE 7.必須有一種方法來修改該正則表達式來傳遞'defaultValue'，否？ – Sparky

看來你需要返回從功能的東西傳遞給addMethod：

$.validator.addMethod('phone', function (value, element) { 
    if (value != element.defaultValue) { 
     return this.optional(element) || /^[01]?[- .]?\(?[2-9]\d{2}\)?[- .]?\d{3}[- .]?\d{4}$/.test(value); 
    } 
    return true; 
}, 'This is not a valid number');

例子：http://jsfiddle.net/L3S9e/

來源

2011-10-11 02:58:06

This Works！謝謝！而且現在對我來說似乎也更有意義了。 – Sparky

@ Sparky672：沒問題！我其實甚至不知道'defaultValue'屬性存在，所以謝謝你的一個很好的問題！ –

我簡直不敢相信我沒有意識到正則表達式正在返回true/false，我的'if/then'完全阻止它。順便說一句：是的，_「財產」_ ... [jQuery用來指它作爲一個「屬性」...]（http://stackoverflow.com/questions/7623535/attrdefaultvalue-is-returning-undefined-using -jquery-1-6-3）。 – Sparky

如何在defaultValue的可選字段上使用jQuery Validator自定義方法？

回答

相關問題