FSD Slip-13 Practical Create an HTML form for Student Feedback Form with Name, Email ID, Mobile No., feedback (Not good, good, very good, excellent) and write a JavaScript to validate all field using Regular Expression.

Create an HTML form for Student Feedback Form with Name, Email ID, Mobile No., feedback

(Not good, good, very good, excellent) and write a JavaScript to validate all field using Regular

Expression.

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Feedback Form</title>
    <script>
        const validation=()=>
        {
            // Get input values
            let name = document.getElementById("name").value.trim();
            let email = document.getElementById("email").value.trim();
            let mobile = document.getElementById("mobile").value.trim();
            let feedback = document.getElementById("feedback").value;

            // Error message elements
            let nameError = document.getElementById("nameError");
            let emailError = document.getElementById("emailError");
            let mobileError = document.getElementById("mobileError");
            let feedbackError = document.getElementById("feedbackError");

            // Clear previous error messages
            nameError.textContent = "";
            emailError.textContent = "";
            mobileError.textContent = "";
            feedbackError.textContent = "";

            // Regular Expressions
            const nameRegex = /^[A-Za-z\s]{3,}$/; // Only letters and spaces, min 3 chars
            const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; // Standard email pattern
            const mobileRegex = /^[6-9]\d{9}$/; // 10-digit mobile, starting with 6-9

            let isValid = true;

            // Validate Name
            if (!nameRegex.test(name)) {
                nameError.textContent = "Enter a valid name (only letters, min 3 chars)";
                isValid = false;
            }

            // Validate Email
            if (!emailRegex.test(email)) {
                emailError.textContent = "Enter a valid email ID (e.g., user@example.com)";
                isValid = false;
            }

            // Validate Mobile No.
            if (!mobileRegex.test(mobile)) {
                mobileError.textContent = "Enter a valid 10-digit mobile number";
                isValid = false;
            }

            // Validate Feedback Selection
            if (feedback === "") {
                feedbackError.textContent = "Please select a feedback option";
                isValid = false;
            }

            // If all fields are valid, submit the form
            if (isValid) {
                alert("Feedback submitted successfully!");
                document.getElementById("feedbackForm").reset(); // Reset form fields
            }
        }      
    </script>
</head>
<body>

    <h2>Student Feedback Form</h2>
    <form id="feedbackForm">
        <label for="name">Name:</label><br>
        <input type="text" id="name"><br>
        <span class="error" id="nameError"></span><br>

        <label for="email">Email ID:</label><br>
        <input type="email" id="email"><br>
        <span class="error" id="emailError"></span><br>

        <label for="mobile">Mobile No.:</label><br>
        <input type="text" id="mobile"><br>
        <span class="error" id="mobileError"></span><br>

        <label for="feedback">Feedback:</label><br>
        <select id="feedback">
            <option value="">Select</option>
            <option value="Not Good">Not Good</option>
            <option value="Good">Good</option>
            <option value="Very Good">Very Good</option>
            <option value="Excellent">Excellent</option>
        </select><br>
        <span class="error" id="feedbackError"></span><br>

        <button type="button" id="submitButton" onclick="validation()">Submit</button>
    </form>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Slip 11: Write node js application that transfer a file as an attachment on web and enables browser to prompt the user to download file using express js.

  const express = require ( 'express' ); const path = require ( 'path' ); const app = express (); const PORT = 3000 ; // Route to download file app . get ( '/download' , ( req , res ) => {     res . download ( 'a.txt' , ( err ) => {         if ( err ) {             console . log ( "Error downloading file:" , err );         } else {             console . log ( "File sent successfully" );         }     }); }); // Home app . get ( '/' , ( req , res ) => {     res . send ( '<h2>Click below to download file</h2><a href="/download">Download File</a>' ); }); app . listen ( PORT , () => {     console . log ( `Server running at http://localhost: ${ PORT } ` ); });
Read more

Slip 7 Create a node js file named main.js for event-driven application. There should be a main loop that listens for events, and then triggers a callback function when one of those events is detected.

 // import event module var events = require('events'); // create an eventEmitter object var eventEmitter = new events.EventEmitter(); // create an event handler var connectHandler = function (s) {    console.log('Its', s); }; // Bind the data_received event eventEmitter.on('data_received', function (name) {    console.log(name, "Understood event -Driven"); }); // trigger data_received event eventEmitter.emit('data_received', "FYMSC(CS)"); // Bind the connection event eventEmitter.on('connection', connectHandler); // trigger connection event eventEmitter.emit('connection', "SIMPLE SOLUTION"); console.log("program Ended");
Read more

Slip 1(a) Write an Angular 13 application addition of two numbers using ng-init, ng-model & ng-bind. And also demonstrate ng-show, ng-disabled, ng-click directives on button component.

Image
 a) ng new slip1 b) cd slip1 c) open app.component.ts   import { Component } from '@angular/core' ; @ Component ({   selector : 'app-root' ,   templateUrl : './app.component.html' ,   styleUrls : [ './app.component.css' ] }) export class AppComponent {   num1 : number = 0 ;   num2 : number = 0 ;   result : number = 0 ;   disableButton : boolean = false ;   showResult : boolean = false ;   add () : void {     this . result = this . num1 + this . num2 ;     this . disableButton = true ;   // Disable the button after calculation     this . showResult = true ;       // Show the computed result   } }                                                                ...
Read more