Scribd
Upload
7 views5 pages

Validation in JavaScript.

The document discusses validation in JavaScript, highlighting its importance in ensuring user input is correct before further processing. It outlines types of validation such as form and input validation, along with HTML attributes used for validation like required, pattern, and maxlength. Additionally, it covers debugging in JavaScript, including the use of built-in debuggers and the console.log() method across major browsers.

Uploaded by

chandrarajesh951
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views5 pages

Validation in JavaScript.

The document discusses validation in JavaScript, highlighting its importance in ensuring user input is correct before further processing. It outlines types of validation such as form and input validation, along with HTML attributes used for validation like required, pattern, and maxlength. Additionally, it covers debugging in JavaScript, including the use of built-in debuggers and the console.log() method across major browsers.

Uploaded by

chandrarajesh951
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Validation in JavaScript

Validation in JavaScript ensures that user input is correct and meets the required criteria
before processing it further. It can occur on the client side, preventing unnecessary server
requests and enhancing user experience.

Types of Validation in JavaScript

1. Form Validation

Ensures all fields are filled in correctly.

Examples: checking email format, required fields, or password strength.

2. Input Validation

Validates single input fields, like numbers only, specific patterns, or length restrictions.

Attributes for Validation in JavaScript

HTML Form Attributes Used for Validation

1. required

Ensures the field cannot be empty.

<input type="text" id="name" required>

2. pattern

Validates input against a regular expression (regex).

<input type="text" id="phone" pattern="[0-9]{10}" title="Enter a 10-digit phone number">

3. maxlength / minlength

Limits the input length.

<input type="text" id="username" maxlength="10" minlength="5">

4. type

Specifies the type of input, like email, number, URL, etc.

<input type="email" id="email"


<html>

<head> <title> hello</title>

</head>

<body>

<h1> form validation</h1>

<script>

function data()

var a=document.getElementById("n1").value

var b=document.getElementById("n2").value

if (b.length>5||b.length<5)

alert("please enter 5 digit password")

return false;

else

true;

</script>

<form onsubmit="return data()" action="hrkkp.html">

UserName:<input type="text" id="n1" required>

Password:<input type="password" placeholder="5 digit password"


id="n2"required>

<input type="text" id="phone" pattern="[0-9]{10}" title="Enter a 10-digit phone number">

<input type="submit" value="Login">

</form>

</body>
</html>

JavaScript Debuggers

Debugging is not easy. But fortunately, all modern browsers have a built-in JavaScript
debugger.

Built-in debuggers can be turned on and off, forcing errors to be reported to the user.

With a debugger, you can also set breakpoints (places where code execution can be
stopped), and examine variables while the code is executing.

Normally (otherwise follow the steps at the bottom of this page), you activate debugging in
your browser with the F12 key, and select "Console" in the debugger menu.

The console.log() Method

If your browser supports debugging, you can use console.log() to display JavaScript values in
the debugger window:

<!DOCTYPE html>

<html>

<body>

<script>

debugger

a = 5;

b = 6;

c = a+b;

console.log(c);

</script>

</body>

</html>
Major Browsers' Debugging Tools

Normally, you activate debugging in your browser with F12, and select "Console" in the
debugger menu.

Otherwise follow these steps:

Chrome

• Open the browser.

• From the menu, select "More tools".

• From tools, choose "Developer tools".

• Finally, select Console.

Firefox

• Open the browser.

• From the menu, select "Web Developer".

• Finally, select "Web Console".

Edge

• Open the browser.

• From the menu, select "Developer Tools".

• Finally, select "Console".

Opera

• Open the browser.

• From the menu, select "Developer".

• From "Developer", select "Developer tools".

• Finally, select "Console".

Safari

• Go to Safari, Preferences, Advanced in the main menu.

• Check "Enable Show Develop menu in menu bar".

• When the new option "Develop" appears in the menu:


Choose "Show Error Console".

You might also like