Scribd
Upload
10 views17 pages

IWP Digital Assignment - 1

Uploaded by

Kunal Puri
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
10 views17 pages

IWP Digital Assignment - 1

Uploaded by

Kunal Puri
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/ 17

1.

Create form like the below figure (captcha not needed)


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Registration Form</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f5f5f5;

margin: 0;

padding: 20px;

.form-container {

width: 700px;

margin: 0 auto;

border: 1px solid #ddd;

background-color: #fff;

border-radius: 5px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

padding: 20px;

}
.form-header {

text-align: center;

font-size: 18px;

margin-bottom: 20px;

font-weight: bold;

.section {

margin-bottom: 20px;

.section-header {

background-color: #e9e9e9;

padding: 10px;

margin: 0;

font-size: 16px;

font-weight: bold;

border: 1px solid #ddd;

margin-bottom: 10px;

.form-group {

margin: 10px 0;

}
.form-group label {

display: block;

font-size: 14px;

margin-bottom: 5px;

.form-group input,

.form-group textarea {

width: calc(100% - 20px);

padding: 8px;

border: 1px solid #ccc;

border-radius: 3px;

font-size: 14px;

margin-left: 10px;

textarea {

resize: none;

small {

display: block;

margin-top: 5px;

color: #999;

font-size: 12px;
}

.form-row {

display: flex;

justify-content: space-between;

.form-row .form-group {

width: 48%;

.form-actions {

text-align: center;

margin-top: 20px;

button {

padding: 10px 15px;

margin: 5px;

font-size: 14px;

border: none;

border-radius: 3px;

cursor: pointer;

}
button:hover {

opacity: 0.9;

button[type="submit"] {

background-color: #007bff;

color: white;

button.clear-btn {

background-color: #6c757d;

color: white;

button.cancel-btn {

background-color: #dc3545;

color: white;

</style>

</head>

<body>

<div class="form-container">

<h2 class="form-header">Registration Form</h2>

<form id="registrationForm">

<!-- Profile Information Section -->


<div class="section">

<h3 class="section-header">Profile Information</h3>

<div class="form-row">

<div class="form-group">

<label for="surname">Surname *</label>

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

</div>

<div class="form-group">

<label for="firstname">First Name *</label>

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

</div>

</div>

<div class="form-row">

<div class="form-group">

<label for="mobile">Mobile No *</label>

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

</div>

<div class="form-group">

<label for="confirm_mobile">Confirm Mobile No *</label>

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

</div>

</div>

<div class="form-row">

<div class="form-group">

<label for="email">E-Mail ID *</label>


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

</div>

<div class="form-group">

<label for="confirm_email">Confirm E-Mail ID *</label>

<input type="email" id="confirm_email" name="confirm_email" required>

</div>

</div>

<div class="form-row">

<div class="form-group">

<label for="password">Password *</label>

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

</div>

<div class="form-group">

<label for="confirm_password">Confirm Password *</label>

<input type="password" id="confirm_password" name="confirm_password" required>

</div>

</div>

</div>

<!-- Company Information Section -->

<div class="section">

<h3 class="section-header">Company Information</h3>

<div class="form-row">

<div class="form-group">

<label for="company_name">Company Name *</label>

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


</div>

<div class="form-group">

<label for="company_phone">Company Phone *</label>

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

</div>

</div>

<div class="form-group">

<label for="company_address">Company Address *</label>

<textarea id="company_address" name="company_address" rows="3" required></textarea>

<small>Not more than 256 characters</small>

</div>

</div>

<!-- Buttons -->

<div class="form-actions">

<button type="submit">Register</button>

<button type="reset" class="clear-btn">Clear</button>

<button type="button" class="cancel-btn" onclick="cancelForm()">Cancel</button>

</div>

</form>

</div>

<script>

// Cancel button functionality

function cancelForm() {

alert("Form submission has been cancelled.");

document.getElementById("registrationForm").reset();
}

</script>

</body>

</html>

2. Create a signup form with the following validations.

a. Registration Number (ex: 25BCE0001, validate with regular expression)

b. Username: It should not have any digits (Ex: pavan540, is not a valid name)

c. Password: it should have at least one small case letter, uppercase letter, digit and
a special character with minimum password length of 8

d. e. Mobile number: exact 10 digits. It should not be entered like (0000000000)

f. Some fields in the signup page must be required (*)


g. Add DOB (DDMMYYY match the patter with regular expression)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Signup Form</title>

<style>

body {

font-family: Arial, sans-serif;

max-width: 600px;

margin: 50px auto;

padding: 20px;

background-color: #f4f4f4;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

h2 {

text-align: center;

form {

display: flex;

flex-direction: column;
}

input {

padding: 10px;

margin: 10px 0;

font-size: 16px;

border: 1px solid #ccc;

border-radius: 5px;

button {

padding: 10px;

font-size: 16px;

background-color: #4CAF50;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

button:hover {

background-color: #45a049;

.error {

color: red;

font-size: 14px;
}

.success {

color: green;

font-size: 14px;

</style>

</head>

<body>

<h2>Signup Form</h2>

<form id="signupForm">

<label for="registrationNumber">Registration Number (e.g., 25BCE0001):


*</label>

<input type="text" id="registrationNumber" name="registrationNumber"


required>

<div id="registrationNumberError" class="error"></div>

<label for="username">Username (no digits allowed): *</label>

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

<div id="usernameError" class="error"></div>

<label for="password">Password (at least 8 characters with uppercase,


lowercase, number, and special character): *</label>

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


<div id="passwordError" class="error"></div>

<label for="mobile">Mobile Number (exactly 10 digits, not 0000000000):


*</label>

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

<div id="mobileError" class="error"></div>

<label for="dob">Date of Birth (DDMMYYYY): *</label>

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

<div id="dobError" class="error"></div>

<button type="submit">Submit</button>

<div id="formFeedback" class="success"></div>

</form>

<script>

document.addEventListener('contextmenu', function(event) {

event.preventDefault();

});

document.getElementById('signupForm').addEventListener('submit',
function(event) {
event.preventDefault();

let isValid = true;

const feedback = document.getElementById('formFeedback');

feedback.innerHTML = "";

const regNum = document.getElementById('registrationNumber').value;

const regNumRegex = /^[0-9]{2}[A-Za-z]{3}[0-9]{4}$/;

if (!regNumRegex.test(regNum)) {

document.getElementById('registrationNumberError').innerText =
"Invalid registration number format.";

isValid = false;

} else {

document.getElementById('registrationNumberError').innerText = "";

const username = document.getElementById('username').value;

const usernameRegex = /^[A-Za-z]+$/;

if (!usernameRegex.test(username)) {

document.getElementById('usernameError').innerText = "Username
should not contain any digits.";

isValid = false;
} else {

document.getElementById('usernameError').innerText = "";

const password = document.getElementById('password').value;

const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$


%^&*])[A-Za-z\d!@#$%^&*]{8,}$/;

if (!passwordRegex.test(password)) {

document.getElementById('passwordError').innerText = "Password must


be at least 8 characters long, contain one uppercase, one lowercase, one digit, and
one special character.";

isValid = false;

} else {

document.getElementById('passwordError').innerText = "";

const mobile = document.getElementById('mobile').value;

const mobileRegex = /^[1-9][0-9]{9}$/;

if (!mobileRegex.test(mobile) || mobile === "0000000000") {

document.getElementById('mobileError').innerText = "Invalid mobile


number. Should be 10 digits and not all zeros.";

isValid = false;
} else {

document.getElementById('mobileError').innerText = "";

const dob = document.getElementById('dob').value;

const dobRegex = /^(0[1-9]|[12][0-9]|3[01])([0][1-9]|1[0-2])\d{4}$/;

if (!dobRegex.test(dob)) {

document.getElementById('dobError').innerText = "Invalid date format.


Use DDMMYYYY.";

isValid = false;

} else {

document.getElementById('dobError').innerText = "";

if (isValid) {

feedback.innerHTML = "Form submitted successfully!";

feedback.style.color = "green";

} else {

feedback.innerHTML = "Please fix the errors above.";

feedback.style.color = "red";

}
});

</script>

</body>

</html>

You might also like