MSc(CS) FSD-I Practical 1-Student Registration details

Students Create an HTML form that contain the Student Registration details and write a JavaScript to validate Student first and last name as it should not contain other than alphabets and age should be between 18 to 50.  


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Registration Form</title>
    <script>
        // ES6 function to validate form fields
        const validateForm = () => {
            let isValid = true;

            // Get input values
            const firstName = document.getElementById('firstName').value.trim();
            const lastName = document.getElementById('lastName').value.trim();
            const age = document.getElementById('age').value.trim();

            // Get error elements
            const firstNameError = document.getElementById('firstNameError');
            const lastNameError = document.getElementById('lastNameError');
            const ageError = document.getElementById('ageError');

            // Reset errors
            firstNameError.textContent = '';
            lastNameError.textContent = '';
            ageError.textContent = '';

            // Regular Expression
            let reF=/^[A-Za-z]+$/;
            // Validate first name using regular expression (only alphabets)
            if (!reF.test(firstName)) {
                firstNameError.textContent = 'First name should only contain alphabets.';
                isValid = false;
            }

            // Validate last name using regular expression (only alphabets)
            if (!reF.test(lastName)) {
                lastNameError.textContent = 'Last name should only contain alphabets.';
                isValid = false;
            }

            // Validate age (between 18 and 50)
            if (!age || age < 18 || age > 50) {
                ageError.textContent = 'Age must be between 18 and 50.';
                isValid = false;
            }

            // If all validations pass, show success message
            if (isValid) {
                alert('Registration successful!');
                document.getElementById('registrationForm').reset(); // Clear the form
            }
        };
    </script>
</head>
<body>
    <h2>Student Registration</h2>
    <form id="registrationForm">
        <label for="firstName">First Name:</label>
        <input type="text" id="firstName" placeholder="Enter your first name">
        <span id="firstNameError"></span>
        <br><br>

        <label for="lastName">Last Name:</label>
        <input type="text" id="lastName" placeholder="Enter your last name">
        <span id="lastNameError"></span>
        <br><br>

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

        <button type="button" onclick="validateForm()">Register</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