Yogesh Chauhan's Blog

JavaScript Input Validation Theme Park Example using throw Statement

in JavaScript on 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


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Higher Order Functions in JavaScript with ExamplesJavaScriptHow to remove WordPress TinyMCE Editor buttons?WordPressArguments in @mixin rules in SCSS (Sass)SCSSHow to select multiple values in React dropdown?ReactIntroduction to Angular modules Part 1: NgModule metadataAngularPostgreSQL transactions using the BEGIN, COMMIT, and ROLLBACK statements.Postgres