Scribd Logo
Upload

Welcome to Scribd!

  • 5 views

    Adl Exp3

    Uploaded by

    nihalsayyad147

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Adl Exp3

    Uploaded by

    nihalsayyad147
    5 views5 pages

    Original Title

    adl exp3

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    5 views5 pages

    Adl Exp3

    Uploaded by

    nihalsayyad147

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 5

    Experiments: 02

    Title:- Write a program demonstrating javascript functions and different validations.


    <!DOCTYPE html>

    <html>

    <head>

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

    <style>

    body {

    font-family: Calibri, Helvetica, sans-serif;

    background-color: pink;

    .container {

    padding-top: 10px;

    padding-right: 50px;

    padding-bottom: 50px;

    padding-left: 50px;

    background-color: lightblue;

    input[type=text], input[type=password], select {

    width: 100%;

    padding: 15px;

    margin: 5px 0 22px 0;

    display: inline-block;

    border: none;

    background: #f1f1f1;

    input[type=text]:focus, input[type=password]:focus {

    background-color: orange;

    outline: none;

    div {

    padding: 10px 0;

    hr {
    border: 1px solid #f1f1f1;

    margin-bottom: 25px;

    .registerbtn {

    background-color: #4CAF50;

    color: white;

    padding: 16px 20px;

    margin: 8px 0;

    border: none;

    cursor: pointer;

    width: 100%;

    opacity: 0.9;

    .registerbtn:hover {

    opacity: 1;

    .error {

    color: red;

    </style>

    </head>

    <body>

    <form onsubmit="return validateForm()">

    <div class="container">

    <center> <h1> Student Registration Form</h1> </center>

    <hr>

    <label for="first_name"> <b> First Name </b> </label>

    <input type="text" id="first_name" name="first_name" placeholder="Firstname" required />

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

    <label for="last_name"> <b> Last Name </b> </label>

    <input type="text" id="last_name" name="last_name" placeholder="Lastname" required />

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

    <label>
    <b>Course</b>

    </label>

    <select id="course" required>

    <option value="">Select a course</option>

    <option value="BCA">BCA</option>

    <option value="BBA">BBA</option>

    <option value="B.Tech">B.Tech</option>

    <option value="MBA">MBA</option>

    <option value="MCA">MCA</option>

    <option value="M.Tech">M.Tech</option>

    </select>

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

    <label>

    <b>Gender</b>

    </label>

    <input type="radio" value="Male" name="gender" id="gender_male" checked> Male

    <input type="radio" value="Female" name="gender" id="gender_female"> Female

    <input type="radio" value="Other" name="gender" id="gender_other"> Other

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

    <label for="email"><b>Email</b></label>

    <input type="text" id="email" placeholder="Enter Email" name="email" required>

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

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

    <input type="password" id="password" placeholder="Enter Password" name="password" required>

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

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

    </form>

    <script>

    function validateForm() {

    const first_name = document.getElementById("first_name").value;


    const last_name = document.getElementById("last_name").value;

    const course = document.getElementById("course").value;

    const gender_male = document.getElementById("gender_male").checked;

    const gender_female = document.getElementById("gender_female").checked;

    const gender_other = document.getElementById("gender_other").checked;

    const email = document.getElementById("email").value;

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

    // Regular expressions for validation

    const nameRegex = /^[a-zA-Z ]{2,30}$/;

    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/;

    // Reset error messages

    const errorElements = document.getElementsByClassName("error");

    for (const errorElement of errorElements) {

    errorElement.textContent = "";

    let isValid = true;

    if (!first_name.match(nameRegex)) {

    document.getElementById("first_name_error").textContent = "Please enter a valid first name.";

    isValid = false; }

    if (!last_name.match(nameRegex)) {

    document.getElementById("last_name_error").textContent = "Please enter a valid last name.";

    isValid = false; }

    if (course === "") {

    document.getElementById("course_error").textContent = "Please select a course.";

    isValid = false; }

    if (!(gender_male || gender_female || gender_other)) {

    document.getElementById("gender_error").textContent = "Please select a gender.";


    isValid = false; }

    if (!email.match(emailRegex)) {

    document.getElementById("email_error").textContent = "Please enter a valid email address.";

    isValid = false; }

    if (!password.match(passwordRegex)) {

    document.getElementById("password_error").textContent = "Password must be 6-20 characters with at least one


    uppercase letter, one lowercase letter, and one digit.";

    isValid = false; }

    if (isValid) {

    alert("Registration successful!"); }

    return isValid; }

    </script>

    </body>

    </html>

    You might also like