SDC Week 8

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>
<label class='label' for="lname">Last name</label><br>
<input class='input' type="text" id="lname" name="lname"><br>
</div>
</div>
<div class="flex">
<label class='label' for="email">Email</label><br>
<input class='input' type="email" id="email" name="email"><br>
</div>
</div>
<div class="flex">
<label class='label' for="phone">Phone</label><br>
<input class='input' type="phone" id="phone" name="phone"><br>
</div>
</div>
<div class="flex">
<label class='label' for="password">Password</label><br>
<input class='input' type="password" id="password" name="password"><br>
</div>
<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">
<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:

SDC Week 8

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SDC Week 8

Uploaded by

Copyright:

Available Formats

NAME: K.

You might also like