Scribd
Upload
3 views

Validation

Uploaded by

Muhammad Junaid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Validation

Uploaded by

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

Validation in JavaScript

Validation in JavaScript is a crucial aspect of web development that ensures the data
entered by users is correct before it gets submitted. This helps in maintaining data
integrity and providing a smooth user experience. There are two main types of
validation: client-side validation and server-side validation.

Client-Side Validation
Client-side validation is performed in the user's browser before the data is sent to the
server. This provides immediate feedback to the user, helping them correct errors
without waiting for a server response. Here is an example of a simple form validation
using JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</body>
</html>
In this example, the validateForm function checks if the "Name" field is empty. If it is,
an alert is shown, and the form submission is prevented.

Server-Side Validation
Server-side validation is performed on the server after the data has been submitted.
This is essential because client-side validation can be easily bypassed by disabling
JavaScript. Server-side validation ensures that the data is correct and secure before
processing it.

Advanced Validation Techniques


Using Regular Expressions
Regular expressions can be used to validate complex patterns such as email addresses,
passwords, etc. Here is an example of validating an email address using a regular
expression:
function isEmailValid(email) {
const re = /^(([^<>()\[\]\\.,;:\s@\"]+(\.[^<>()\[\]\\.,;:\s@\"]+)*)|(\".
+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-
9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}

Password Validation
Password validation can ensure that passwords meet certain criteria such as length,
inclusion of uppercase and lowercase letters, numbers, and special characters:
function isPasswordSecure(password) {
const re = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\\$%\\
^&\\*])(?=.{8,})");
return re.test(password);
}

Real-Time Validation
Real-time validation provides instant feedback as the user types. This can be achieved
by attaching event listeners to the input fields:
document.querySelector('#username').addEventListener('input', function (e
) {
const username = e.target.value;
if (username.length < 3 || username.length > 25) {
showError(e.target, 'Username must be between 3 and 25 characters.');
} else {
showSuccess(e.target);
}
});

function showError(input, message) {


const formField = input.parentElement;
formField.classList.remove('success');
formField.classList.add('error');
const error = formField.querySelector('small');
error.textContent = message;
}

function showSuccess(input) {
const formField = input.parentElement;
formField.classList.remove('error');
formField.classList.add('success');
const error = formField.querySelector('small');
error.textContent = '';
}
In this example, the showError and showSuccess functions are used to provide visual
feedback to the user.
Conclusion
Validation in JavaScript is essential for ensuring data integrity and providing a smooth
user experience. By combining client-side and server-side validation, using regular
expressions, and providing real-time feedback, you can create robust and user-friendly
forms.

You might also like