YogeshChauhan.com
JavaScript Input Validation Theme Park Example using throw Statement
July 22, 2019

I am sure you guys are familiar with JavaScript Errors handling by Try, Throw, Catch and Finally.

In simple terms,

   With the try statement you can test a chunk of code for any errors.

   With catch statement you can handle all those errors in a specific way.

   With throw statement you can create your custom errors for specific scenario.

   And after try and catch, finally statement will execute code no matter what.

When any type of error occurs JavaScript will throw an exception (error). Actually those are ‘error objects’ with name and value or texts for that name.

The throw statement allows user to write a custom error. For e.g.


  throw "Number is too small";    // throw a text error

  throw 101;          // throw a number error

Now let’s look at our input validation example and see how we can use throw statement in validating inputs by user in a form.

Let’s say you’re making a system to check children’s age and whether they should be allowed in a Theme Park. The allowed age is between 4 to 14. Pretty simple example.

In the example above, I’ve input text field with where user is going to add the age. Then I’ve a button on which user will click on after entering the age. I’ve tag h3 as well, to show the results after user’s click on the button.

In the script I’ve created a function which will be called by a button click. I’ve two variables resultText and exampleVal. In ‘resultText’ I’m getting the value of ‘h3′ tag with the id=’result’ and in ‘exampleVal’ I’m saving user’s input and test it for errors.

After that there are some simple error checkings. If it’s empty then it’ll ask user to enter age, if user enters text or character then it’ll ask for a number input and then finally it’ll check if the age fells in the range of 4 to 14.

That’s it. I hope it’s helpful to you guys. Thank you!

Demo

dreamhost

Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 5 How to create flickering text using CSS? Mar 4 How to use data-* Attributes in HTML? Mar 4 The substr() method in JavaScript and how it’s different from substring() Mar 4 A complete guide to add responsive YouTube videos using HTML and CSS Mar 3 How to embed YouTube or other video links in WordPress? Mar 3 How to change the Login Logo in WordPress?

You might also like these

Is there a way to do a FULL OUTER JOIN in MySQL?SQL/MySQLHow to merge arrays in JavaScript?JavaScriptHow to select an element using its ID without the high specificity of the ID selector?CSSWhat is PostgreSQL? How similar or different it is from SQL?PostgresHow to get ACF values from custom post type?WordPressHow to position an image on top of another image using CSS?CSS