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!


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to remove a specific item from an array in JavaScript?JavaScriptKilling A Project Part 4: What Would Be Your Top 3 Priorities For Planning The Cancellation?MiscellaneousControl rendering using CSS content-visibility propertyCSSCSS align-items property examplesCSSHow to add menu to your WordPress theme?WordPressWhat are Google Web Stories and How to create them in WordPress?WordPress