Scribd
Upload
17 views4 pages

SDC Week 8

The document contains code for form validation using JavaScript. It defines functions to validate the username, email, and password fields on a registration form by checking the length and format. It also styles any error messages in red. When the form is submitted, the validateForm() function calls the individual validation functions and returns false if any fail, preventing the form from being submitted.

Uploaded by

asamrishi13
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
17 views4 pages

SDC Week 8

The document contains code for form validation using JavaScript. It defines functions to validate the username, email, and password fields on a registration form by checking the length and format. It also styles any error messages in red. When the form is submitted, the validateForm() function calls the individual validation functions and returns false if any fail, preventing the form from being submitted.

Uploaded by

asamrishi13
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/ 4

NAME: K.

AKANKSHA DATE:22/12/2023
ROLL NO: 22R21A1225
BRANCH & SECTION: IT-A

 Form Validation:
<html lang="en">
<body>
V.Harshitha
22R21A1259
</body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<h2>Registration Form</h2>
<form id="registrationForm" onsubmit="return validateForm()">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<span id="usernameError" class="error"></span>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<span id="emailError" class="error"></span>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<span id="passwordError" class="error"></span>
<br>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
var username = document.getElementById('username').value;
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
document.getElementById('usernameError').innerHTML = "";
document.getElementById('emailError').innerHTML = "";
document.getElementById('passwordError').innerHTML = "";
if (username.length < 3) {
document.getElementById('usernameError').innerHTML = "Username must be at least 3 characters";
return false;
}
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
document.getElementById('emailError').innerHTML = "Invalid email address";
return false;
}
if (password.length < 6) {
document.getElementById('passwordError').innerHTML = "Password must be at least 6 characters";
return false;
}
return true;
}
</script>
</body>
</html>

Output:

<html>
<body>
V.Harshitha
22R21A1259
</body>
<script>
function validateName(name) {
if (name == null || name == "") {
alert("Name can't be blank!");
return false;
}
if (name.length < 3) {
alert("Name must be atleast 3 characters long!");
return false;
}
return true;
}
function validatePassword(password, confirm_password) {
if (password == null || password == "") {
alert("Password can't be blank!");
return false;
}
if (password.length < 6) {
alert("Password must be at least 6 characters long!");
return false;
}
return confirmPassword(password, confirm_password);
}
function confirmPassword(password, confirm_password) {
console.log(password, confirm_password)
if (password === confirm_password) {
return true;
}
else {
alert("Entered Passwords are not Same!");
return false;
}
}
function validateImage(file) {
var fileName = file.value.split("\\").pop();
var allowedExtensions = /(\.jpg|\.jpeg|\.png)$/i;

if (!allowedExtensions.exec(fileName)) {
return false;
}
return true;
}
function validateEmail(email) {
var reg = new RegExp("^[a-zA-Z0-9_.]+@[a-zA-Z0-9.]+$");
if (!reg.test(email)) {
alert("Invalid e-mail Address!");
return false;
}
return true;
}
function displayFileName(file) {
var fileName = file.value.split("\\").pop();
document.getElementById("fileDescription").innerHTML = fileName;
document.getElementById("fileDescription").style = "color:blue";
}
function validateNumber(number) {
if (isNaN(number)) {
alert("Only Numeric Values are allowed!");
return false;
}
return true;
}
function validateImage(filePath) {
var allowedExtensions = /(\.jpg|\.jpeg|\.png)$/i;
if (!allowedExtensions.exec(filePath)) {
alert("Invalid Image Provided!")
return false;
}
return true;
}
function validateForm() {
let isValid = true;

if (!validateName(document.signup.fname.value)) {
isValid = false;
}
if (!validateName(document.signup.lname.value)) {
isValid = false;
}
if (!validatePassword(document.signup.password.value, document.signup.confirm_password.value)) {
isValid = false;
}
if (!validateEmail(document.signup.email.value)) {
isValid = false;
}
if (!validateNumber(document.signup.phone.value)) {
isValid = false;
}
if (!validateImage(document.signup.file.value)) {
isValid = false;
}
isValid ? alert("Form Data is Valid") : alert("Form Data is not Valid")
}
</script>
<body>
<form name="signup" method="post">
<div>
<div class="heading">Sign Up Form</div>
<hr>
<div class="flex">
<div class="flexItem">
<label class='label' for="fname">First name</label><br>
<input class='input' type="text" id="fname" name="fname"><br>
</div>
<div class="flexItem">
<label class='label' for="lname">Last name</label><br>
<input class='input' type="text" id="lname" name="lname"><br>
</div>
</div>
<div class="flex">
<div class="flexItem">
<label class='label' for="email">Email</label><br>
<input class='input' type="email" id="email" name="email"><br>
</div>
</div>
<div class="flex">
<div class="flexItem">
<label class='label' for="phone">Phone</label><br>
<input class='input' type="phone" id="phone" name="phone"><br>
</div>
</div>
<div class="flex">
<div class="flexItem">
<label class='label' for="password">Password</label><br>
<input class='input' type="password" id="password" name="password"><br>
</div>
<div class="flexItem">
<label class='label' for="password">Confirm Password</label><br>
<input class='input' type="password" id="confirm_password" name="confirm_password"><br>
</div>
</div>
<div class="flex">
<div class="flexItem">
<button class='upload'
onclick="event.preventDefault(); document.getElementById('file').click()">Profile
Picture</button>
<input type='file' id="file" name='file' onchange="displayFileName(this)" style="display:none">
</div>
<div class="flexItem" id="fileDescription">
</div>
</div>
</div>
<input class="submit" type="submit" value="Submit" onclick=" event.preventDefault(); validateForm()">
</div>
</form>
</body>
</html>

Output:

You might also like