adsterra

Password Matching form validation using Java Script


Password Matching form validation using Java Script.


Password Matching is an field of a html form while you are register yourself on any website or may be on  an application. Today we learn it using simple html and java scripts concepts, you need to create two different files within same folder, the first one is html file save as Form.html and second is java script file save as Matching.js ,the code of both files are given below:
Form.html
<html>
<head>
    <title>Password Matching</title>
</head>
<body>
    <form class="myForm" action="">
        <div class="form1">
    Name:-<br> <input type="text" id="input" name="Name" ><br>
    Email:-<br><input type="email" id="input2" name="Email" ><br>
    Password:-<br><input type="password" id="input"name="password"><br>
    Confirm-Password:-<br><input type="password" id='input' name="Cpassword"><br>
    <br><button >Submit</button></div>
    </form>
    <script src="Matching.js"></script>
</body>
</html>
Matching.js
let newP=document.createElement('p')
document.querySelector('.myForm').addEventListener('submit', function (event) {
   event.preventDefault();
   let name=event.target.Name.value;
   let mail=event.target.Email.value;
   let pass=event.target.password.value;
   let repass = event.target.Cpassword.value;
   if (pass===repass) {
     newP.textContent=`Welcome!! ${name}`
      // alert("Password match");
   } else {
      newP.textContent ="sorry!wrong password"
    //alert("password doesn't match");
   }
   document.querySelector('body').appendChild(newP)
   //clear
   let input =document.querySelectorAll('#input')
   input.value =" ";
  })

Post a Comment

0 Comments