JSFiddle - React, Tailwind, and code Playground

by Rafa Ola

HTML

<link rel="stylesheet" href="https://rawgit.com/noelboss/featherlight/master/src/featherlight.css">
<script src="https://rawgit.com/noelboss/featherlight/master/src/featherlight.js"></script>
<div class="lightbox" id="fl1">
        <div id="header">
     <h1>Change Password </h1>

</div>
<form id="changePwd" name="formPwd" method="post" onsubmit="return closeSelf(this);" action="" accept-charset="UTF-8">
    <p>Please fill all the mandatory (*) fields.</p>
    <div class="question">
        <input type="password" name="new_pwd" pattern="^.*(?=.{6,})(?=.*[a-zA-Z])[a-zA-Z0-9]+$" title="Your new Password is required" required/>
        <label>
            <font color='red'>New Password(*):</font>
        </label>
    </div>
    <div class="question">
        <input type="password" name="confirm_pwd" pattern="^.*(?=.{6,})(?=.*[a-zA-Z])[a-zA-Z0-9]+$" title="Confirm Password field is required" required/>
        <label>
            <font color='red'>Confirm Password(*):</font>
        </label> <span class="required" id="doesNotMatch"></span>

    </div>
    <center>
        <input type="submit" name="submit" onclick="checkPwdMatch();" value="Submit" />
        <input type="hidden" name="user_id" id="user_id" value="<?php echo $user_id; ?>" />
    </center>
</form>
    </div>

<a href="#fl1" data-featherlight>Change Password.php </a>

CSS

.lightbox { display: none }

JavaScript

function checkPwdMatch() {

     var newPwd = document.formPwd.new_pwd;
     var confirmPwd = document.formPwd.confirm_pwd;
     var output = true;

     if (newPwd.value !== confirmPwd.value) {
         newPwd.value = "";
         confirmPwd.value = "";
         newPwd.focus();
         document.getElementById("doesNotMatch").innerHTML = "Passwords do not match! Try Again";
         output = false;
     }
     return output;
 }



 $(function () {
     $("#testClick").click(function ()

     $(".featherlight").hide("slow");
     });
 }); {