JavaScript Form validation 



 registration.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="title">REGISTRATION FORM</div>
    <div class="form" name="formdiv">
        <form name="myform" method="post" action="https://www.nsec.ac.in/" onsubmit="return validateform()">
            <div class="element" name="inputdiv">Name: <input type="text" name="name"></div>
            <div class="element">Address: <input type="text" name="address"></div>
            <div class="element">Email-Address: <input type="text" name="email"></div>
            <div class="element">Password: <input type="text" name="password"></div>
            <div class="element">Telephone: <input type="text" name="phone"></div>
            <div class="element">
                Select Your course
                <select name="course" id="">
                    <option value="WB">BTECH</option>
                    <option value="MBBS">MBBS</option>
                    <option value="BSC">BSC</option>
                    <option value="BARCH">BARCH</option>
                    <option value="MTECH">MTECH</option>
                    <option value="MSC">MSC</option>
                    <option value="MBA">MBA</option>
                </select>
            </div>
            <div class="element">Comments: <textarea name="comments" id=""></textarea></div>
            <div class="element0">
                Select all the scripting languages you know <br>
                <div class="elechield">
                    <input type="checkbox" name="scriptingLanguage" value="JavaScript"> JavaScript
                    <input type="checkbox" name="scriptingLanguage" value="Perl"> Perl
                    <input type="checkbox" name="scriptingLanguage" value="Reset"> Reset
                </div>
            </div>
            <div class="element0">
                <input type="submit" value="submit" class="btn">
                <input type="reset" value="reset" class="btn">
            </div>
        </form>
    </div>
    <script src="script.js"></script>
</body>

</html>

script.js

function validateform() {
    var name = document.myform.name.value.trim();
    var address = document.myform.address.value.trim();
    var email = document.myform.email.value.trim();
    var password = document.myform.password.value.trim();
    var phone = document.myform.phone.value.trim();
    var scriptingLanguages = document.querySelectorAll('input[name="scriptingLanguage"]:checked');


    if (name === "") {
        alert("Name is empty");
        return false;
    }
    else if (address === "") {
        alert("Address is empty");
        return false;
    }
    else if (email === "") {
        alert("Email is empty");
        return false;
    }
    else if (!/^\S+@\S+\.\S+$/.test(email)) {
        alert("Invalid email address");
        return false;
    }
    else if (password === "") {
        alert("Password is empty");
        return false;
    }
    else if (!/(?=.*[!@#$%^&*])(?=.*[0-9])(?=.*[a-zA-Z])/.test(password)) {
        alert("Password must contain at least one special character, one number, and one letter");
        return false;
    }
    else if (password.length < 8) {
        alert("Password must be at least 8 characters long");
        return false;
    }
    else if (phone === "") {
        alert("Phone number is empty");
        return false;
    }
    else if (!/^\d{10}$/.test(phone)) {
        alert("Phone number is wrong! It should be exactly 10 digits long");
        return false;
    }
    else if (scriptingLanguages.length === 0) {
        alert("Please select at least one scripting language");
        return false;
    }

    return true; // Form is valid
}

Comments

Post a Comment

Popular posts from this blog

Notes on Compiler and Interpreter in C Programming

  Notes on Compiler and Interpreter in C Programming  lecture link -  https://youtu.be/SsFJ7KnHaEM **Compiler:** - Translates the entire C program into machine code before execution. - Generates an executable file that can be run independently. - Performs lexical, syntactic, and semantic analysis. - Optimizes code during compilation for better performance. - Errors are detected and reported after the whole program is analyzed. - Compilation process can be time-consuming, but execution of the compiled program is faster. - Examples of C compilers: GCC (GNU Compiler Collection), Clang, MSVC (Microsoft Visual C++). **Interpreter:** - Translates and executes the C program line by line. - Does not produce an intermediate executable file. - Executes the code immediately, which can be useful for debugging. - Slower execution compared to compiled code since translation occurs during runtime. - Errors are detected and reported line by line, which can be easier for debugging specifi...
Read more

GATE exam guide 2024

Image
GATE exam guide  22-03-2024 (by- K aushani Kanjilal )    GATE, the Graduate Aptitude Test in Engineering, provides an excellent opportunity to achieve your IIT dreams. It is a national-level exam conducted by IISc Bengaluru and the seven IITs, typically scheduled for the first week of February. All Engineering graduates or candidates who have completed 3+2 Hons. Degree in Pure Sciences must register for the GATE exam. A good rank in this exam can lead to highly valuable M.Tech, M.S., or PhD degrees, along with research opportunities from IITs, IISc, and various other universities in and outside India. Moreover, esteemed universities in Germany, Singapore, Canada, and Australia accept GATE scorecards for admission to Masters and PhD degrees, with additional benefits of stipend throughout the course. The eligibility criteria for GATE are as follows: 1. Engineering students in the 3rd or higher year of their degree can sit for the exam. 2. Students in the 1st Year of M.Sc ar...
Read more
Image
  JAVASCRIPT ARRAY <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title >     < script > ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////         const staffdetail = [             { name : "Gourab Das" , age : 20 , salary : 80000 , currency : "INR" },             { name : "Abhisek ck" , age : 20 , salary : 60000 , currency : "INR" },             { name : "Rahul k" , age : 20 , salary : 90000 , currency : "INR" },             { name : "Jahir" , age : 20 , salary : 100000 , currency : "INR" },         ...
Read more