Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,195,441 members, 7,958,323 topics. Date: Wednesday, 25 September 2024 at 12:26 PM |
Nairaland Forum / Science/Technology / Programming / Adding Validation To Javascript Code (2046 Views)
Newbies To Javascript / What Could Be Wrong With This Javascript Code / Javascript Code Autocomplete In Webpage (2) (3) (4)
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: |
Re: Adding Validation To Javascript Code by IamGodzilla: 4:49pm On Oct 31, 2014 |
TheRealAdonye: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" ... 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" 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: |
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: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: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: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: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)
Meet The First Nigerian To Break iOS History / Python Developers, Who Is Very Familiar With Sphinx? / 17-year-old Boy Sells App For $30 Million To Yahoo Inc
(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. 39 |