HTML form

 <!DOCTYPE html>

<html>

<head>

  <title>Simple Form</title>

  <style>

    .error { color: red; font-size: 0.9em; }

  </style>

</head>

<body>

  <form onsubmit="return checkForm()">

    Name: <input type="text" id="name"><span class="error" id="nameErr"></span><br><br>

    Email: <input type="text" id="email"><span class="error" id="emailErr"></span><br><br>

    Password: <input type="password" id="pass"><span class="error" id="passErr"></span><br><br>

    Confirm Password: <input type="password" id="cpass"><span class="error" id="cpassErr"></span><br><br>

    Age: <input type="number" id="age"><span class="error" id="ageErr"></span><br><br>

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

  </form>


  <script>

    function checkForm() {

      // Clear all errors

      document.querySelectorAll('.error').forEach(e => e.textContent = "");


      let name = document.getElementById("name").value;

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

      let pass = document.getElementById("pass").value;

      let cpass = document.getElementById("cpass").value;

      let age = document.getElementById("age").value;

      let valid = true;


      if (name === "") {

        document.getElementById("nameErr").textContent = " Required";

        valid = false;

      }


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

      if (email === "") {

        document.getElementById("emailErr").textContent = " Required";

        valid = false;

      } else if (!emailRegex.test(email)) {

        document.getElementById("emailErr").textContent = " Invalid";

        valid = false;

      }


      if (pass.length < 8) {

        document.getElementById("passErr").textContent = " Min 8 chars";

        valid = false;

      }


      if (cpass !== pass) {

        document.getElementById("cpassErr").textContent = " Does not match";

        valid = false;

      }


      if (age) {

        if (age < 18 || age > 100) {

          document.getElementById("ageErr").textContent = " 18-100 only";

          valid = false;

        }

      }


      return valid;

    }

  </script>

</body>

</html>

Comments

Post a Comment

Popular posts from this blog

COMPILER END

 flex example.l gcc lex.yy.c -o lexer -lfl ./lexer example.l example.y bison -d example.y        # generates y.tab.c and y.tab.h flex example.l            # generates lex.yy.c gcc lex.yy.c y.tab.c -o parser -lfl ./parser Q1. Design a LEX Code to count the number of lines, space, tab-meta character, and rest of characters in each Input pattern. Solution: %{ #include<stdio.h> int line = 0 , space = 0 , tab = 0 , meta = 0 , other = 0; %} %% "\n" {line++;} " " {space++;} "\t" {tab++;} [\^\$\%\*\+\-\/\&\(\)\{\}\[\]\;\"] {meta++;} . {other++;} %% int main(){ yylex(); printf("Line:%d\n",line); printf("Space:%d\n",space); printf("Tab:%d\n",tab); printf("Meta:%d\n",meta); printf("Other:%d\n",other); return 0; } int yywrap(){ return 1; } Output: int main(){ cout << "hello"; } Line:3 Space:3 Tab:1 Meta:7 Other:18 Q2. Design a LEX Code to identify and print valid Identifier of C/C++ in gi...
Read more

REACT CALCULATOR

 import React, { useState } from 'react'; export default function Calculator() {   const [display, setDisplay] = useState('0');   const [previousValue, setPreviousValue] = useState(null);   const [operation, setOperation] = useState(null);   const [waitingForNewValue, setWaitingForNewValue] = useState(false);   const inputNumber = (num) => {     if (waitingForNewValue) {       setDisplay(String(num));       setWaitingForNewValue(false);     } else {       setDisplay(display === '0' ? String(num) : display + num);     }   };   const inputOperator = (nextOperator) => {     const inputValue = parseFloat(display);     if (previousValue === null) {       setPreviousValue(inputValue);     } else if (operation) {       const newValue = calculate(previousValue, inputValue, operation);       setPrevious...
Read more