jQuery的HTML5輸入有效的現場

我有一個看起來像這樣的輸入域：jQuery的HTML5輸入有效的現場

<input type="number" id="month" placeholder="Month" min="1" max="12" required>

問題

當我在表單中使用它，它需要數介於1和12.
我使用jQuery將keyup複製信息，在我的情況下爲href。在這種情況下，它不受現場任何要求的「保護」。

例

應該是無效的：

<a href="?month=abc">

應該是有效的：

<a href="?month=12">

我可以使用驗證，從內置的HTML5輸入不知何故？我有不同的領域有不同的要求。

來源

2013-10-31 Jens Törnell

當您複製該值時，您可以在此驗證該值。向我們展示您爲此所做的腳本。 – Archer

如果你真的想掛鉤驗證，有這個解決方法：http://stackoverflow.com/questions/7548612/triggering-html5-form-validation/7562439#7562439 – Robb

當您捕獲keyup上的值時，可以使用isNaN函數檢查它是否爲數字。這也會驗證小數，所以你要檢查是否有小數。

if (!isNaN(someValue)){ 
    //your code to add to href 
}

來源

2013-10-31 13:53:09 Jack

所有我從你的問題得到的是，你想從jQuery的

$("a[href*='month']").click(function(event){ 
    var value=$(this).attr("href"); 
    value=value.split("="); 
    var temp=value[1]; 
    alert(temp); 
    if(isNaN(temp)){ 
     event.preventDefault(); 
     alert("not a number"); 
    } 
    else if(temp<1||temp>12){ 
     event.preventDefault(); 
     alert("invalid month"); 
    } 
});

編輯驗證<a>標籤：
感謝傑克的評論，這裏的問題可能的解決方案要求

$("#month").keyup(function(){ 
    //Add your copying code here, and edit $atag accordingly 
    var $atag=$("a[href*='month']"); 
    var value=$(this).val(); 
    if(isNaN(value)){ 
     $atag.attr("disabled","disabled"); 
    } 
    else if(value<1||value>12){ 
     $atag.attr("disabled","disabled"); 
    } 
    else $atag.removeAttr("disabled"); 
});

來源

2013-10-31 13:58:04

我很確定他想驗證輸入在將它附加到href之前是一個數字。 – Jack

正如他所說的那樣，不應該是有效的，所以我以這種方式完成了 – 2013-10-31 14:09:46

'我使用jQuery來將密鑰複製信息，在我的情況下複製到href.'他是在keyup上獲取輸入的值，然後將其分配給href。他可以在關鍵時刻做所有評估。 – Jack

首先您可以使用HTML5表單驗證AP一世。但是這需要瀏覽器支持這個API或者你正在使用一個polyfill。目前FF4 +，IE10 +，Chrome和Safari都支持該API。但FF不完全支持數字類型。

如果你想使用HTML5的API：

使用輸入事件，而不是keyup事件。這對於你的任務來說是更好的事情（想想，粘貼，剪切等）。
只需使用：有效的選擇測試，羯羊輸入有效（如果不是polyfilled，將在IE9-拋出一個錯誤）

我已經把一個simple solution for you，這是使用webshims到爲您填充API。

但說實話，我質疑你的做法。您可以簡單地使用帶有按鈕，適當的操作屬性和一個名爲type =「number」的月份的表單，而不是針對您的解決方案的鏈接+ JS，並且根本不需要添加JS。代碼看起來是這樣的，你得到的HTML表單驗證免費：

<form action="#"> 
    <div> 
     <button class="text" type="submit">to month: </button> 
     <input type="number" name="month" placeholder="Month" min="1" max="12" required value="1" size="2" /> 
    </div> 
</form>

我的例子也說明了如何樣式的按鈕作爲一個鏈接。

來源

2013-10-31 16:07:34

jQuery的HTML5輸入有效的現場

回答

相關問題