OpenCart – Validate Numbers Only

This nifty article will teach you how to use JavaScript to force your users to have to enter numbers only into form input fields. We will even show you how to allow a decimal (.) and numbers only. This is very handy especially if you don’t want to validate on the PHP side and just take care of it on the client side.

WHY VALIDATE?

You will need validation on form fields to ensure healthy and accurate submission of data. Ever seen a web form that allows you to enter letters as numbers when only numbers are needed; and when pressing submit it only says “NO LETTERS ALLOWED?” This is a wasted step in my opinion. Let’s get the validation over with while they are actually typing in the input box :)

To demonstrate we are going to choose one of the many input fields you will find in your Opencart installation. Let’s go to the following file: catalog/view/theme/default/template/account/login.tpl where you will find the login form. Locate the following code:

<input type="text" name="email" value="<?php echo $email; ?>" />

Now replace that code with this, adding the onKeyPress feature:

<input type="text" onkeypress="return isNumberKey(event)" name="email" value="<?php echo $email; ?>" />

Now all we need to do is define the function isNumberKey as a JavaScript function. Towards the bottom of the .tpl right above , paste the following code:

<script>
function isNumberKey(evt) {
	var charCode = (evt.which) ? evt.which : event.keyCode
	if (charCode > 31 && (charCode < 48 || charCode > 57)) {
		return false;
	} else {
		return true;
	}
}
</script>

Now, here is an example of the same function but allowing a decimal along with the numbers. :

<script>
function isNumberKeyWithDecimal(evt) {
	var charCode = (evt.which) ? evt.which : event.keyCode
	if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46) {
		return false;
	} else {
		return true;
	}
}
</script>

Now go to your login screen and try and type a letter. It won’t let you because on every KEY PRESS the function is checking for numbers only. I’m a believer in taking care of business before SERVER SIDE if at all possible to minimize HTTP REQUESTS. Besides, this is a full proof method to only allow for numbers.

Here also is some code that deletes all NON DIGITS after the key is released UP:

var input = document.querySelector('form[name=myForm] #username');

input.onkeyup = function() {
    var patterns = /[^0-9]/g;
    var caretPos = this.selectionStart;

    this.value = input.value.replace(patterns, '');
    this.setSelectionRange(caretPos, caretPos);
}

Looking for quality OpenCart Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , | Posted under OpenCart | RSS 2.0

Author Spotlight

Joe Stenhouse

Joe Stenhouse

I am a web application developer that specializes in PHP, JAVASCRIPT, MYSQL, HTML, and CSS. We manifest exciting potentials within the world wide web through means of innovation.

Leave a Reply

Your email address will not be published. Required fields are marked *


+ 5 = 14

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>