dots Created with Sketch.
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

amazon

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

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
Implicit and Explicit Joins in Oracle SQLSQL/MySQLHow to create a horizontal scrolling menu with and without flex using CSS (or SCSS)?CSSSanitize inputs using built-in WordPress functionsWordPressKilling A Project Part 4: What Would Be Your Top 3 Priorities For Planning The Cancellation?MiscellaneousWhat’s a page re-rendering in React?ReactHow to create HTML elements with ID and class using JavaScript?HTML