JS validation for restricting only numbers in textfield

Question

We have a magento e commerce site.

we need validation support for following code with only numbers

<input type="text" onkeydown="limit(this);" onkeyup="limit(this); "title="<?php echo $this->__('Zip/Postal Code') ?>"
 name="billing[postcode]" id="billing:postcode" 
 value="<?php echo $this->escapeHtml($this->getAddress()->getPostcode()) ?>"
 class="input-text validate-zip-international
 <?php echo $this->helper('customer/address')->getAttributeValidationClass('postcode') ?>" placeholder="Postal code"/>

JS

function limit(element)
    {
        var max_chars = 6;

        if(element.value.length > max_chars) {
            element.value = element.value.substr(0, max_chars);
        }
    }

Now its restricting only for numbers , but when we enter the alphabets , cursor is moving up . also i want to remove the increment button present at the last

You can use `input type="tel"` also for numeric validation you can use following regex: `/^\d$/` — Rajesh, Feb 11 '16 at 10:54

score 2 · Answer 1 · answered Feb 11 '16 at 11:03

Change your limit function so it could validate input for numbers only:

function limit(element)
{
    var max_chars = 6,
        regexp = /^\d+$/gs;

    if(element.value.length > max_chars) {
        element.value = element.value.substr(0, max_chars);
    }
    if (!regexp.test(element.value)) {
        alert("Only numbers!");
        return false;
    }
}

The test() method executes a search for a match between a regular expression and a specified string. Returns true or false.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test

i updated code in question and Now its restricting only for numbers , but when we enter the alphabets , cursor is moving up . also i want to remove the increment button present at the last — fresher, Feb 11 '16 at 11:08

score 1 · Accepted Answer · answered Feb 11 '16 at 10:58

1

You can you use Validation from http://www.formvalidator.net/#default-validators_numbers Example

<!-- Any numerical value -->
<input type="text" data-validation="number">

<!-- Only allowing float values -->
<input type="text" data-validation="number" data-validation-allowing="float">

<!-- Allowing float values and negative values -->
<input type="text" data-validation="number" data-validation-allowing="float,negative">

<!-- Validate float number with comma separated decimals -->
<input type="text" data-validation="number" data-validation-allowing="float" 
         data-validation-decimal-separator=",">

<!-- Only allowing numbers from 1 to 100 -->
<input type="text" data-validation="number" data-validation-allowing="range[1;100]">

<!-- Only allowing numbers from -50 to 30 -->
<input type="text" data-validation="number" data-validation-allowing="range[-50;30],negative">

<!-- Only allowing numbers from 0.05 to 0.5 -->
<input type="text" data-validation="number" data-validation-allowing="range[0.05;0.5],float">

answered Feb 11 '16 at 10:58

Bishoy Bisahi

377
1
11

i updated code in question and Now its restricting only for numbers , but when we enter the alphabets , cursor is moving up . also i want to remove the increment button present at the last – fresher Feb 11 '16 at 11:08
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { /* display: none; <- Crashes Chrome on hover */ -webkit-appearance: none; margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ } – Bishoy Bisahi Feb 11 '16 at 11:13
can you please add your code in my code and edit your answer – fresher Feb 11 '16 at 11:15
@beshoy semsem, are you sure is correct, because I was trying to add a validation that allows all positive numbers and only -1 as negetive number. I used allowing="range[-1;9999],negative", but doesnt seem to work in the way intended – Geo Thomas Nov 07 '16 at 07:16

score 1 · Answer 3 · edited Feb 11 '16 at 11:02

1

HTML5 supports type="number", change type="text" to type="number"

edited Feb 11 '16 at 11:02

Phiter

14,570
14
50
84

answered Feb 11 '16 at 11:01

Dinesh

499
5
6

1

What if his clients are on IE6, for example? – Phiter Feb 11 '16 at 11:02
i updated code in question and Now its restricting only for numbers , but when we enter the alphabets , cursor is moving up . also i want to remove the increment button present at the last – fresher Feb 11 '16 at 11:08
@PhiterFernandes You are still supporting people on IE6? Man, I don't want to do your job. – somethinghere Feb 11 '16 at 11:19
@BabyinCoding, use this to remove the incrementing part http://stackoverflow.com/questions/3975769/disable-webkits-spin-buttons-on-input-type-number – Phiter Feb 11 '16 at 11:19

JS validation for restricting only numbers in textfield

3 Answers3