在原型中使用表單驗證的HTML5表單佔位符回退

我的頁面上有一個HTML5表單，其中包含佔位符文本的電子郵件輸入。它的作品非常漂亮，我喜歡本地驗證！在原型中使用表單驗證的HTML5表單佔位符回退

我不知道如何最好地服務於舊瀏覽器。我正在使用一些JavaScript來複制佔位符的文本並將其作爲值進行打印。它運行良好，但是表單驗證會因爲文本不是表單中的電子郵件地址而失效。

我不想失去驗證..任何想法？

HTML

<input id="email" type="email" placeholder="Enter your email address">

的JavaScript（原型）：

var Placeholder = Class.create({ 
    initialize: function (element) { 
     this.element = element; 
     this.placeholder = element.readAttribute('placeholder'); 
     this.blur(); 
     Event.observe(this.element, 'focus', this.focus.bindAsEventListener(this)); 
     Event.observe(this.element, 'blur', this.blur.bindAsEventListener(this)); 
    }, 
    focus: function() { 
     if (this.element.hasClassName('placeholder')) 
      this.element.clear().removeClassName('placeholder'); 
    }, 
    blur: function() { 
     if (this.element.value === '') 
      this.element.addClassName('placeholder').value = this.placeholder; 
    } 
}); 
Event.observe(window, 'load', function(e){ 
    new Placeholder($('email')); 

});

編輯：

那豈不是巨大的，如果支持的瀏覽器的佔位符忽略的價值屬性？

編輯2：

不，我不想設定輸入類型爲文本。這會將驗證行爲從電子郵件語法更改爲拼寫檢查。

來源

2011-07-12 technopeasant

這是您正在編寫的自定義驗證還是您使用驗證插件？ – kinakuta

這也不是瀏覽器的本地驗證。閱讀此處：http://diveintohtml5.org/forms.html – technopeasant

我熟悉這一點 - 我假設您爲舊版瀏覽器提供了自己的驗證，但我認爲我在描述時誤解了這個問題。您使用javascript將佔位符文本放在輸入字段中，但在支持瀏覽器的html5中，這會導致驗證觸發，因爲它實際上不是電子郵件地址？ – kinakuta

用戶Modernizr檢測支持佔位符，並且只使用你的JavaScript來佔位符文本複製如果支持不存在：

if(!Modernizr.input.placeholder){ 
    // copy placeholder text to input 
}

這將阻止它在支持html5表單屬性（如佔位符）的瀏覽器上進行復制。

來源

2011-07-12 08:37:22 kinakuta

所有當前支持HTML5驗證的瀏覽器也支持佔位符屬性（Opera 11+，Chrome 10+，FF4.0 +，IE10都支持;只有Opera低於11才支持驗證）。這意味着kinakutas代碼應該有所幫助。如果您不想使用Modernizr進行測試，您可以使用以下代碼： 'if（！'placeholder'in document.createElement（'input'））{} –

原本不想使用Modernizr，因爲它的重量和一個http請求，但決定使用一個已配置的版本進行輸入特徵檢測，並在我的插件腳本文件的底部運行該文件。不必擔心FOUC（http://paulirish.com/2009/avoiding-the-fouc-v3/），因爲它是佔位符文本，而不是實際的元素。哈利路亞！ – technopeasant

試試這個：

<input type="email" value="Enter Email" 
onfocus="if (this.value == 'Enter Email') {this.value = '';}" 
onblur="if (this.value =='') {this.value = 'Enter Email';}" />

來源

2011-07-12 07:44:36

如果輸入類型設置爲文本驗證是拼寫檢查。我想維護電子郵件語法驗證，因此類型必須保持爲「電子郵件」 – technopeasant

確定您可以將類型更改爲電子郵件，但仍然可以使用 –

我知道這是一個老問題，但它可以幫助其他用戶遇到這個問題。

您可以使用http://afarkas.github.com/webshim/demos/demos/webforms.html進行表單驗證，支持舊版瀏覽器。它位於jQuery和Modernizer之上，並且很容易實現。

希望它有幫助。

來源

2012-05-04 13:59:29 elias

在原型中使用表單驗證的HTML5表單佔位符回退

回答

相關問題