YogeshChauhan . com

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

dreamhost

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 uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 5 Use inline if to make a shorter conditional syntax in React May 4 What is Conditional Rendering in React? May 3 How does @extend rule work in SCSS (Sass)? May 2 How different is Handling Events in React vs HTML DOM? May 2 How to create bouncing balls using HTML canvas and JavaScript? Apr 30 HTML canvas methods

You might also like these

How to create rotating texts using JavaScript and CSS?CSS4 ways to create Date Objects in JavaScriptJavaScriptCONCAT and CONCAT_WS Functions in PostgresPostgresNew to  Drupal? Here’s What You Need to KnowDrupalLIMIT and OFFSET in PostgresPostgresWordPress: How to find all posts with a specific custom field value?WordPress