Validate text boxes against custom set variable

Question

I have a form that I want to create whereby the user enters in one digit per text box. I need all those digits to be correct when the user clicks a button - imagine the iPhone Passcode lock feature.

Ideally I'd like the button only to be clickable when all the digits are correct (perhaps with a variable I define) - otherwise it doesn't perform an action.

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>

At the moment I'm seeing if I can use this with jQuery/Javascript but am unsure how to go about this.

I'd really appreciate some help with this. Thank you.

Answer 1

You could do something like this. Note this isn't tested but the logic should make sense. isNumeric isn't an actual function btw, so you will need to define your own numeric check.:

$(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");
    }
});
});

Also, set your "Next Location" button to disabled on page load. You probably want to set that via JS incase the user does not have Javascript enabled so you fall back nicely.

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
            }
        }
    );

That should get you there most of the way there. Good luck!

Answer 3

Hi Bartek,

That does help. I didn't think to disable the button on page load.

To help explain further, I code in place to check if it is only numbers being entered, as well as some hover effects:

$(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 : '');
     }
    });
});

The onlyNumeric class is being used from a jQuery plugin.

What I am stuck with though is the validation aspect. How do I put in place that say the numbers 1, 2, 3, 4, 5 are the only numbers that cause the button to go to, say, another web page. I imagined setting up a variable that would be checked against this.

Have I explained myself clearly?! :s Thanks.

Answer 4

I based my solution off the AlphaNumeric plugin for jQuery. This plugin allows you to do the numeric() functionality, but also extends it by allowing you to do custom overrides to mask certain characters / allow others. In your case, let's say you wanted the following input fields to only accept the numbers 1-5 inclusive:

<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>

The corresponding jQuery code using the above plugin would look like this:

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

Simply: this makes the characters 6,7,8,9 and 0 invalid in that field. This technique could also be used to allow additional characters (like a period for floating point values):

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

Additional documentation can be found on the plugin's website. Of course, remember to not only check for valid input in Javascript, but also on submission, as not all your users might have javascript.

Good luck, sir!

Answer 5

Use a range validation:

Head Area:

  <script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"&gt;&lt;/script&gt;
<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>

Body Content

<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>