typescript Validation for HTML form

Running steps: save all the file in single project open terminal as shown above 

use command:
tsc validation.ts
node validation.js

form1.html



<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="validation.js"></script>
    <title>TypeScript</title>
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="css/styles3.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
  <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
  <link rel="stylesheet" href="form1.css" type="text/css" />
<style> 

</style> 
  
  </head>

    <body>
      
  <div class="container">
    <div id="main">

      <article class="w3-container" style="text-align: center;">
        <br><br><br>
        <form name="reg" action="index.html" onsubmit="return false">

          
              <div class="centered">
                  
                <div class="input-icons"> 
                  <i class="fa fa-user icon"> 
                </i> 
                 <input type="text" name="name" placeholder="Enter name"  size="50" style="text-align: center;" />
                 <p id="name_error" style="color : red;"></p></div>
        
                 <div class="input-icons"> 
                  <i class="fa fa-phone icon"> 
                </i> 
                 <input type="text"  size="50" name="phone"style="text-align: center;" placeholder="Enter Phone Number" />
                 <p id="phone_error"style="color : red;"></p></div>
        
                 <div class="input-icons"> 
                  <i class="fa fa-envelope icon"> 
                </i> 
                 <input type="text" placeholder="Enter Email" size="50" style="text-align: center;" name="email" id="email" />
                 <p id="email_error"style="color : red;" value="email"></p></div>
        
                 <div class="input-icons"> 
                  <i class="fa fa-key icon"> 
                </i> 
                 <input type="password" name="password"size="50" style="text-align: center;" placeholder="Password" />
                 <p id="pass_error" style="color : red;"></p></div>
        
                 <div class="input-icons"> 
                  <i class="fa fa-lock fa-lg icon"></i>
                 <input type="password" placeholder="Confirm Password" size="50" style="text-align: center;" name="confirm_pass"/>
                 <p id="confirm_error" style="color : red;"></p></div>
                 <button class="button"  style="width: 15%;" id="myBtn" onClick="Redirect()" >Log in</button>
                 <button class="button" style=" width: 15%;" onclick="validateForm()" >Register</button><br><br>
                 
  
  </div>
  
  </form>
  <div>
      <p id="result_display"></p>
  </div>
      </article>


  <script type = "text/javascript">
   
       function Redirect() {
         if(validateForm())
          window.location = "home.html";
       }
    //-->
 </script>
  </body>
</html>

Home.html

<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Alata' rel='stylesheet'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Hello, world!</title>
    <style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}




        .header {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
        }
        
        .t {
            width: 100px;
            height: 100px;
            transition: width 2s, height 4s;
        }
        
        .t:hover {
            width: 300px;
            height: 300px;
        }
        
        .animate:hover {
            animation: shake 0.5s;
            animation-iteration-count: infinite;
        }
        
        @keyframes shake {
            0% {
                transform: translate(1px, 1px) rotate(0deg);
            }
            10% {
                transform: translate(-1px, -2px) rotate(-1deg);
            }
            20% {
                transform: translate(-3px, 0px) rotate(1deg);
            }
            30% {
                transform: translate(3px, 2px) rotate(0deg);
            }
            40% {
                transform: translate(1px, -1px) rotate(1deg);
            }
            50% {
                transform: translate(-1px, 2px) rotate(-1deg);
            }
            60% {
                transform: translate(-3px, 1px) rotate(0deg);
            }
            70% {
                transform: translate(3px, 1px) rotate(-1deg);
            }
            80% {
                transform: translate(-1px, -1px) rotate(1deg);
            }
            90% {
                transform: translate(1px, 2px) rotate(0deg);
            }
            100% {
                transform: translate(1px, -2px) rotate(-1deg);
            }
        }
        
        #shadow {
            border: 1px solid;
            padding: 10px;
            box-shadow: 5px 10px 20px black inset;
        }
        
        #textshadow {
            text-shadow: 2px 2px 8px black;
        }
        
        #para1 {
            text-align: center;
            color: red;
        }
        
        body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

        
        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
        }
        
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            /* Position the tooltip */
            position: absolute;
            z-index: 1;
            top: -5px;
            right: 105%;
        }
        
        .tooltip:hover .tooltiptext {
            visibility: visible;
        }
        
        .googlefont {
            font-family: 'Alata';
            font-size: 22px;
        }
        
        @font-face {
            font-family: myFirstFont;
            src: url(sansation_light.woff);
        }
        
        * {
            font-family: myFirstFont;
        }
        
        .footer {
            background-color: #f1f1f1;
            padding: 10px;
            text-align: center;
        }
    </style>

</head>

<body>
    <!--Header-->
    <div class="header">
        <div class="topnav" id="myTopnav">
            <a class="active">Home</a>
            <a href="https://vijayazaparde.blogspot.com/">Read Our Blog</a>
            <a href="Feedback.html">Feedback</a>
            <a href="https://5minwebsite.angelbroking.com/Diykyc/SubbrokerLead?SbTag=QUFXWg==&BType=T0xE">Click here to open account</a>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                <i class="fa fa-bars"></i> </a>
        </div>



        <div id="shadow">
            <h1 id="textshadow">Angel Broking Use refferral code AAWZ</h1>
        </div>
        </br>
        </br>
        <!--coursel example-->
        <div class="slideshow-container">

            <div class="mySlides fade">
              <div class="numbertext">1 / 3</div>
              <img src="images/img2.PNG" style="width:100%">
              <div class="text">Caption Text</div>
            </div>
            
            <div class="mySlides fade">
              <div class="numbertext">2 / 3</div>
              <img src="images/img4.png" style="width:100%">
              <div class="text">Caption Two</div>
            </div>
            
            <div class="mySlides fade">
              <div class="numbertext">3 / 3</div>
              <img src="images/img2.PNG" style="width:100%">
              <div class="text">Caption Three</div>
            </div>
            
            </div>
            <br>
            
            <div style="text-align:center">
              <span class="dot"></span> 
              <span class="dot"></span> 
              <span class="dot"></span> 
            </div>
        <!--Form-->

        <form>
            <h1>Click Here To Open Demate account
             <button><a href="https://5minwebsite.angelbroking.com/Diykyc/SubbrokerLead?SbTag=QUFXWg==&BType=T0xE">Click here to open account</a></button>
            </h1>
            
        </form>

        <!--Banner-->



        <!-- Transition -->
        <h1>The transition Property</h1>
        <div class="t">
            <img src="images/img5.png" alt="flower1" style="width:100%; height:100px">
        </div>


        <!-- Amimation -->
        <h1>The Animation Property</h1>
        <img class="animate" src="images/img4.png" alt="flower2" style="width:50%; height:300px">
        </br>
        </br>


        <!-- Box and text Shadow-->



        <!--Selector-->
        <h1>Selector</h1>
        <p id="para1">Angel broking</p>
        <p>This paragraph is not affected because of selector.</p>

        <!--Navigation bar-->


        <div style="padding-left:16px">
        </div>

        <!--Tooltip-->
        <h2>Tooltip</h2>

        <div class="tooltip">Hover over me
            <span class="tooltiptext">Tooltip text</span>
        </div>

        <!--Google Font-->
        <div class="googlefont">
            <h1>Angel Broking</h1>
            <h2>Trade Brain with Ajay Zaparde</h2>
            <The>This is some experiences by Ajay Zaparde who have very good brain towards the trading and thinks that if every educated person in India has a trading account then one day we all will be the one who wants to touch the sky.The idea was created
                based on experiences that are drawn from success. It’s an education which is streamlined so you can avoid many of the pitfalls I experienced on my way to financial success when I had nobody guiding or mentoring me and I had to learn everything
                the much harder way said by Ajay. to read more read from blog section.</p>
        </div>

        <!--Web Font-->
        <h1>Web Font</h1>
        <div>
            contact here for more info:ajayzaparde@gmail.com
        </div>


        <!--Footer-->
        <Footer>this is not copyright</Footer>
        <script>
            function myFunction() {
              var x = document.getElementById("myTopnav");
              if (x.className === "topnav") {
                x.className += " responsive";
              } else {
                x.className = "topnav";
              }
            }


            var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}
            </script>
            

</body>

</html>

form1.css

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Jost', sans-serif;
  outline: none;
  color: #5c4b51;
}

body{
  background: linear-gradient(to right, #f4b661, #f16160);
}

.wrapper{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
input {
    width: 80%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
  }
  
  /* Style the submit button */
  input[type=submit] {
    background-color: #4CAF50;
    color: white;
  }
  
  /* Style the container for inputs */
  .container {
    background-color: #f1f1f1;
    padding: 20px;
    width: 30%;
    height: 50%;
    top: 90px;
    left: 600px;
    position: relative;
    
  }
   
  
  /* The message box is shown when the user clicks on the password field */
  #message {
    display:none;
    background: #f1f1f1;
    color: #000;
    position: relative;
    padding: 20px;
    margin-top: 10px;
  }
  
  #message p {
    padding: 10px 35px;
    font-size: 18px;
  }
  
  /* Add a green text color and a checkmark when the requirements are right */
  .valid {
    color: green;
  }
  
  .valid:before {
    position: relative;
    left: -35px;
    content: "✔";
  }
  
  /* Add a red text color and an "x" when the requirements are wrong */
  .invalid {
    color: red;
  }
  
  .invalid:before {
    position: relative;
    left: -35px;
    content: "✖";
  }


  .input-icons i { 
    position: absolute; 
} 
  
.input-icons { 
    width: 100%; 
    margin-bottom: 10px; 
} 
  
.icon { 
  padding: 7px;
    color: black;
    min-width: 50px;
    text-align: center;
    background-color: grey; 
} 
  
.input-field { 
    width: 100%; 
    padding: 10px; 
    text-align: center; 
} 
  
h2 { 
    color: green; 
} 

validations.ts

 class user {

  fullName: string;
  constructor(
      public firstName: string,
      public phone:number,
      public email: string,
      public password : string
      
  ) {
      this.fullName = firstName;
  }
}

interface Person {
  firstName: string;
  
}

let greeter = (person: Person): string =>{
  return "Hello, " + person.firstName ;
}


let validateForm = ():boolean=> {
  var firstName = document.forms["reg"]["name"].value;
  var s = ""
  var patt1 = /[0-9]/g;
  var patt2 = /[!@#$%^&*]/g;
  var patt3=  /[a-zA-Z]/g;
  var result = firstName.match(patt1);
  
  if (firstName.match(patt1) || firstName.match(patt2) || firstName.length<2) {
    s = s + "enter valid name \n";
    document.getElementById("name_error").innerHTML = "error";
  }
  if (firstName == "") {
      s = s + "First Name must be filled out \n";
      document.getElementById("name_error").innerHTML = "Please Enter your first name";
  }
 

  var phone= document.forms["reg"]["phone"].value;
  if (phone == "" ) {
    s = s + "Phone number must be valid filled out \n";
    document.getElementById("phone_error").innerHTML = "Please Enter valid your Phone number";
  }
  if (phone.length < 10 || phone.length>10) {
    s = s + "Phone number must be valid length \n";
    document.getElementById("phone_error").innerHTML = "Please Enter valid Phone number";
  }
  if (phone.match(patt3)) {
    s = s + "Phone number must be valid  \n";
    document.getElementById("phone_error").innerHTML = "Please Enter valid Phone number";
  }
  var email = document.forms["reg"]["email"].value;
  var mailformat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;


    if (email == "") {
      s = s + "email must be filled out \n";
      document.getElementById("email_error").innerHTML = "Please Enter your Email";
  }
  if (!email.match(mailformat)) {
    s = s + "email must be valid \n";
    document.getElementById("email_error").innerHTML = "Please Enter your valid Email ";
 }
  
   var pass= document.forms["reg"]["password"].value;
    if (pass == "") {
      s = s + "password must be filled out \n";
      document.getElementById("pass_error").innerHTML = "Please Enter your Password";
  }
  if (pass.length < 8) {
    s = s + "password must be 8 character long \n";
      document.getElementById("pass_error").innerHTML = "Please Enter 8 digit Password";
  }
  if (!pass.match(patt1)) {
    s = s + "password must be contain atleast one digit \n";
      document.getElementById("pass_error").innerHTML = "Please Enter atleast 1 digit ";
  }
  if (!pass.match(patt2)) {
    s = s + "password must be contain atleast one special character \n";
      document.getElementById("pass_error").innerHTML = "Please Enter atleast 1 special character ";
  }
  if (!pass.match(patt3)) {
    s = s + "password must be contain atleast one Alphabet \n";
      document.getElementById("pass_error").innerHTML = "Please Enter atleast 1 Alphabet ";
  }
    var pass_c= document.forms["reg"]["confirm_pass"].value;
    if (pass_c!==pass) {
      s = s + "confirm your password\n";
      document.getElementById("confirm_error").innerHTML = "confirm your password";
    }

  if (s != "") {
      alert(s);
      return false;
  }
  else {
      let object = new user(firstName,phone,email,pass);
      let str = document.getElementById("result_display").innerHTML;
      document.getElementById("result_display").innerHTML = str + "<br>"+ greeter(object) + "<br> You can Log in now.";
      return true;
  }
}

Comments

Post a Comment