驗證對自定義設置變量的文本框

Question

我有一個表單，我想創建用戶輸入每個文本框一個數字。當用戶點擊按鈕時，我需要所有這些數字都是正確的 - 想象iPhone密碼鎖定功能。

理想情況下，我希望只有在所有數字都正確的情況下才可點擊按鈕（也許使用我定義的變量） - 否則它不會執行操作。

HTML -

<form id="journey"> 
    <input name="code1" type="text" class="code onlyNumeric" maxlength="1" /> 
    <input name="code2" type="text" class="code onlyNumeric" maxlength="1" /> 
    <input name="code3" type="text" class="code onlyNumeric" maxlength="1" /> 
    <input name="code4" type="text" class="code onlyNumeric" maxlength="1" /> 
    <input name="code5" type="text" class="code onlyNumeric" maxlength="1" /> 

    <input type="button" class="button" value="Next location" /> 
</form> 

在我所看到的，如果我可以用這個與jQuery/Javascript支持，但是我不知道該如何去這一刻。

我真的很感謝這個幫助。謝謝。

Answer 1

你可以做這樣的事情。注意這沒有經過測試，但邏輯應該是有道理的。 ISNUMERIC不是實際的功能，順便說一句，所以你需要定義自己的數字支票：

$(function() { 
$("#journey input").keyup(function() { 
    // Fetch all the fields and test that they are all numeric. 
    var $code_fields = $("#journey input[class='onlyNumeric']"); 
    var all_numeric = true; 

    $code_fields.each(function(i, el) { 
     if (!isNumeric($(el).val())) { 
     all_numeric = false; 
     } 
    }); 

    // You will need to give your Next Location button some kind of id. 
    if (all_numeric == true) { 
     $("#next_location_btn").attr("disabled", "false"); 
    } 
}); 
}); 

此外，設置你的「下一個位置」按鈕，禁用頁面加載。你可能想要通過JS設置，因爲用戶沒有啓用Javascript，所以你很好地回退。

Answer 2

$(".onlyNumeric").keydown(
     function(event){ 
      // get the ASCII value for the key that was pressed 
      if(event.keyCode < 48 || event.keyCode > 57){ 
       return false; // don't add the value to the input because it's not 0-9 
      } 
     } 
    ); 

這應該讓你在那裏大部分的方式。祝你好運！

Answer 3

這確實有幫助。我不認爲在頁面加載時禁用按鈕。

爲了幫助進一步解釋，我在地方的代碼來檢查它是否被輸入只有數字，以及一些懸停效果：

$(document).ready(function() { 

<!--Form input--> 
$('.onlyNumeric').numeric(); 

<!--Turn the input box focus on and off--> 
    $('input[type="text"]').addClass("idleField"); 
    $('input[type="text"]').focus(function() { 
     $(this).removeClass("idleField").addClass("focusField"); 
     if (this.value == this.defaultValue){ 
      this.value = ''; 
     } 
     if(this.value != this.defaultValue){ 
      this.select(); 
     } 
    }); 
    $('input[type="text"]').blur(function() { 
     $(this).removeClass("focusField").addClass("idleField"); 
     if ($.trim(this.value) == ''){ 
      this.value = (this.defaultValue ? this.defaultValue : ''); 
     } 
    }); 
}); 

的onlyNumeric類正在從一個jQuery插件使用。

我堅持的是驗證方面。我如何設置數字1,2,3,4,5是導致按鈕進入另一個網頁的唯一數字。我想像一下建立一個變量來檢查這個變量。

我是否清楚地解釋了自己？ ：謝謝。

Answer 4

我基於jQuery的AlphaNumeric plugin取代了我的解決方案。這個插件允許你執行numeric（）函數，但也可以通過允許你進行自定義覆蓋來屏蔽某些字符/允許其他字符來擴展它。在你的情況，假設你想下面的輸入字段只接受數字1-5包容性：

<form id="journey"> 
    <input name="code1" type="text" class="code onlyNumeric" maxlength="1" /> 
    <input name="code2" type="text" class="code onlyNumeric" maxlength="1" /> 
    <input name="code3" type="text" class="code onlyNumeric" maxlength="1" /> 
    <input name="code4" type="text" class="code onlyNumeric" maxlength="1" /> 
    <input name="code5" type="text" class="code onlyNumeric" maxlength="1" /> 

    <input type="button" class="button" value="Next location" /> 
</form> 

使用上述插件看起來像這樣對應的jQuery代碼：

$('#journey input.onlyNumeric').numeric({ichars:'67890'}); 

簡單：這使得該字段中的字符6,7,8,9和0無效。此技術也可用於允許附加字符（如浮點值的週期）：

$('#journey input.onlyNumeric').numeric({ichars:'67890', allow:'.'}); 

其他文檔可以在插件的網站上找到。當然，請記住，不僅要檢查Javascript中的有效輸入，還要提交，因爲並非所有的用戶都可能擁有javascript。

祝你好運，先生！

Answer 5

使用範圍驗證：

頭部區域：

<script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script> 
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> 
<script type="text/javascript"> 
jQuery.validator.setDefaults({ 
    debug: true, 
    success: "valid" 
});; 
</script> 

<script> 
    $(document).ready(function(){ 
    $("#myform").validate({ 
    rules: { 
    field: { 
     required: true, 
     range: [13, 23] 
    } 
    } 
}); 
    }); 
</script> 

正文內容

<form id="myform"> 
    <label for="field">Required, minium 13, maximum 23: </label> 
    <input class="left" id="field" name="field" /> 
    <br/> 
    <input type="submit" value="Validate!" /> 
</form>