Validating a simple form using JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Student Details Form</title>
</head>
<body>

    <h1>Student Details Form</h1>

    <form id="studentForm" onsubmit="return validateForm()">
        <label for="name">Name:</label>
        <input type="text" id="name" placeholder="Enter your name">
        <br><br>

        <label for="age">Age:</label>
        <input type="number" id="age" placeholder="Enter your age">
        <br><br>

        <label for="email">Email:</label>
        <input type="email" id="email" placeholder="Enter your email">
        <br><br>

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

    <p id="error" style="color: red;"></p>

    <script>
        function validateForm() {
            // Get form values
            let name = document.getElementById("name").value.trim();
            let age = document.getElementById("age").value.trim();
            let email = document.getElementById("email").value.trim();
            let error = document.getElementById("error");

            // Clear previous error message
            error.textContent = "";

            // Validate name
            if (name === "") {
                error.textContent = "Name is required.";
                return false;
            }

            // Validate age
            if (age === "" || isNaN(age) || age <= 0) {
                error.textContent = "Please enter a valid age.";
                return false;
            }

            // Validate email
            if (email === "" || !email.includes("@")) {
                error.textContent = "Please enter a valid email address.";
                return false;
            }

            // If all validations pass
            alert("Form submitted successfully!");
            return true;
        }
    </script>

</body>
</html>

Explanation:

  1. HTML Form:

    • Input Fields:
      • id="name": For entering the student’s name.
      • id="age": For entering the student’s age.
      • id="email": For entering the student’s email.
    • Submit Button: The onsubmit attribute calls the validateForm() function when the form is submitted.

  2. JavaScript Validation:

    • The validateForm() function is triggered on form submission.
    • It retrieves the values of the name, age, and email fields.
    • Validation Rules:
      • Name: Must not be empty.
      • Age: Must be a positive number.
      • Email: Must contain "@" (basic validation).
    • If any validation fails, an error message is displayed, and the form is not submitted (return false).
    • If all validations pass, an alert is shown, and the form submission proceeds (return true).

  3. Error Display:

    • A <p> element with id="error" displays the first validation error in red.

This ensures basic client-side validation before submitting the form

Comments

Post a Comment

Popular posts from this blog

IT Workshop GXESL208 KTU BTech 2024 Scheme - Dr Binu V P

About Me - Dr Binu V P Syllabus Scheme and assessments Learn Theory Well Before Doing Lab- Foundations Of Computing: From Hardware Essentials To Web Design GXEST203 Reference Invitation to Computer Science   G. Michael Schneider, Judith Gersting Introduction to Computers : Peter Norton Linux For Developers   William Rothwell Teach Yourself HTML, CSS and JavaScript   Julie C. Meloni Jennifer Kyrnin Learning Materials 1.Hardware and software      Basic Computer Architecture      Memory Hierarchy      Registers      Cache Memory      RAM      Virtual Memory      Motherboard      Input Output Devices      Storage Devices-HDDs, SSDs, Optical Storage Devices      Interface Cards      Buses      Port and Connectors      Firmware      Boot Process     M...
Read more

Familiarization of basic Linux Commands- ls, mkdir, rmdir , rm, cat, cp, mv , chmod

 ls - list files The ls command in Linux is one of the most frequently used commands. It is used to list the contents of a directory . It shows files, directories, and symbolic links. Here’s a detailed explanation of the command, including its syntax, common options, and examples. Syntax ls [OPTION]... [FILE]... OPTION : Flags to modify the behavior of the command. FILE : The directory or file(s) whose contents you want to list. If omitted, ls lists the contents of the current directory. Default Behavior Without any options, ls lists the contents of the current directory in a simple format. It does not show hidden files (files starting with a dot . ) by default. Common Options Option Description -l Displays contents in a detailed (long) format, including file permissions, size, and more. -a Lists all files, including hidden files (starting with . ). -h Shows file sizes in a human-readable format (e.g., 1K , 5M , 3G ). -R Lists contents of directories recursively. -t Sorts files ...
Read more