Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,148,895 members, 7,802,878 topics. Date: Saturday, 20 April 2024 at 01:02 AM

Adding Validation To Javascript Code - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / Adding Validation To Javascript Code (1944 Views)

Newbies To Javascript / What Could Be Wrong With This Javascript Code / Javascript Code Autocomplete In Webpage (2) (3) (4)

(1) (Reply) (Go Down)

Adding Validation To Javascript Code by TheRealAdonye(m): 3:27pm On Oct 31, 2014
Hey guys, So I'm learning Javascript and I have an assignment to write a simple Calculator. This Calculator should also be able to validate the entries and use alert boxes if the entry isn't a number.
I have finished coding the calculator but I don't know how to go about the validation aspect of it.

Can any Programming egghead help me out, please.
I don't just want a program that does the aforementioned, I'll also need pointers as to how it was achieved. Thanks.

I have attached a zipped file of my program so far.

Re: Adding Validation To Javascript Code by IamGodzilla: 4:16pm On Oct 31, 2014
You can simply do this with Html5 ......
<input type="number">
It doesn't allow alphabets.
And as for the alerts, you may need jquery.
Re: Adding Validation To Javascript Code by TheRealAdonye(m): 4:37pm On Oct 31, 2014
Ok.

I haven't learnt Jquery yet though.

Can't I use an If else construct and put it in a function eg,

If isNan = true for input_A
alert ("The input should only be a number);
}
else


Something like that..


IamGodzilla:
You can simply do this with Html5 ......
<input type="number">
It doesn't allow alphabets.
And as for the alerts, you may need jquery.
Re: Adding Validation To Javascript Code by IamGodzilla: 4:49pm On Oct 31, 2014
TheRealAdonye:
Ok.

I haven't learnt Jquery yet though.

Can't I use an If else construct and put it in a function eg,

If isNan = true for input_A
alert ("The input should only be a number);
}
else


Your post was that, if a user enters an invalid character , there's an alert. Well, that is if you have set an event, like in jquery ''there's a keyup event' that when the user presses for e.g letter a, according to your code, it will show an alert("the key you pressed is not a number"wink;
...
But in javascript, it works with action...like you have to click something before it can trigger. In your case. If the answer = isNan....alert("only numbers are allowed"wink;


I hope you understand.
Re: Adding Validation To Javascript Code by TheRealAdonye(m): 5:06pm On Oct 31, 2014
I guess I didn't come across as succinctly as I should have, Forgive me.

Its the action in Javascript that I was referring to..

IamGodzilla:

Your post was that, if a user enters an invalid character , there's an alert. Well, that is if you have set an event, like in jquery ''there's a keyup event' that when the user presses for e.g letter a, according to your code, it will show an alert("the key you pressed is not a number"wink;
...
But in javascript, it works with action...like you have to click something before it can trigger. In your case. If the answer = isNan....alert("only numbers are allowed"wink;


I hope you understand.
Re: Adding Validation To Javascript Code by dgbanj: 5:11pm On Oct 31, 2014
For New Browsers Use HTML5 element <input type"number"/> but it doesn't work on all browsers so here is the javascript version

<html>
<head>
<title>Number Validation</title>
<script>
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode //ternary operator
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}

</script>
</head>

<body>
<p>Simple Calculator Check</p>
<input type="text" id="checkme" onkeypress="return isNumberKey(event)"/>


</body>
</html>

If you want to allow decimals replace the "if condition" with this:

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

To know more about keyboard numbers visit http://www.penticoff.com/nb/kbds/ibm104kb.htm

Thanks
Re: Adding Validation To Javascript Code by Craigston: 9:51pm On Oct 31, 2014
I think it would be better if you posted relevant code so far here. It'll give a clue for suggestions. I am also a learner.
You can get the value of the input field using an onChange event listener and store this value using a value. Then use parseInt() or parseFloat() functions test if it's a numerical input. If it's not a number, the function will return NaN or any number it could find. Or use the isNaN() function to test the variable. You can also test for the presence of non-numeric characters in the input string and throw an exception if any is found. That may be preferable. Define all this in a function. You may also obtain all values of inputs and store them in an array; then use a loop to iterate through the array and test each element of the array with the function you've created.
Re: Adding Validation To Javascript Code by Nobody: 10:49pm On Oct 31, 2014
See my own open source calculator - http://Nairaland.com/post/javascript/creating-a-simple-calculator-with-javascript
Re: Adding Validation To Javascript Code by Craigston: 8:25pm On Nov 28, 2014
dhtml18:
See my own open source calculator - http://Nairaland.com/post/javascript/creating-a-simple-calculator-with-javascript
I like the calculator I see there. Well I'm a newbie, or, more descriptively, a novice. Uh, I think the calculator there wouldn't work for mobile devices and browsers like UC Browser, Opera Mini and the likes. Only on their big brothers on desktop.
Re: Adding Validation To Javascript Code by Nobody: 10:19am On Nov 29, 2014
Craigston:
I like the calculator I see there. Well I'm a newbie, or, more descriptively, a novice. Uh, I think the calculator there wouldn't work for mobile devices and browsers like UC Browser, Opera Mini and the likes. Only on their big brothers on desktop.
True, it does not work in all browsers truely. But it was a tutorial, if i want to make it work across all browsers it will be too advanced for newbies for follow.
The way things work is that you study a tutorial, learn the lesson there and advance on it. You cannot expect professional programmers to spoonfeed everyone. I know plenty of people will not even follow the calculator tutorial, they just want to copy the codes without understanding it - their goodluck. At least i have contributed something.

1 Like

Re: Adding Validation To Javascript Code by Craigston: 1:04pm On Nov 29, 2014
dhtml18:

True, it does not work in all browsers truely. But it was a tutorial, if i want to make it work across all browsers it will be too advanced for newbies for follow.
The way things work is that you study a tutorial, learn the lesson there and advance on it. You cannot expect professional programmers to spoon-feed everyone. I know plenty of people will not even follow the calculator tutorial, they just want to copy the codes without understanding it - their goodluck. At least i have contributed something.
That's right. And those that won't study and understand how the calculator works are not doing themselves any good.
Re: Adding Validation To Javascript Code by Nobody: 5:31pm On Nov 29, 2014
Exactly, the aim of the calculator script was to teach some principles of javaScript, that is all. If you can understand how to do that calculator, you would be doing yourself a whole lot of good.
Re: Adding Validation To Javascript Code by Craigston: 8:12pm On Nov 29, 2014
dhtml18:
Exactly, the aim of the calculator script was to teach some principles of javaScript, that is all. If you can understand how to do that calculator, you would be doing yourself a whole lot of good.
Here is a quote from I came across:
"I do not enlighten those who are not eager to learn, nor arouse those who are not willing to give an explanation themselves. If I have presented one corner of the square and they cannot come back to me with the other three, I should not go over the points again."
-- Confucius

(1) (Reply)

Get Your Java, C++, 3d Max, Photoshop, Computer Engineering Tutorials Here / Help!!! Computer Science Project / Changing The Prostitution Industry Through IT

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 70
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.