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".
