JSFiddle - React, Tailwind, and code Playground

by alachgar

HTML

<link rel="stylesheet" href="https://dl-web.dropbox.com/get/Public/Freelance/css/bootstrap.css?w=8a6533ef">
<meta name="viewport" content="width=device-width, initial-scale=1">
		
		<!-- This jquery.min.js is necessary for popup to Print Modal -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
		
		<!-- This For Phone Mask -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>	
		
		<!-- This bootstrap.min.css is necessary for the CSS of the app in a whole -->		
		<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
		
		<!-- This bootstrap.js Should always Remain at the end here so it is Last Loaded -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>	
		
		<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
		


<form class="form-block" method="post"><div style="margin:0;padding:0;display:inline"></div>
  <header id="login_header" class="form-header">

  </header>
  <div class="form-body last-block">

    <input id="login_token" name="login_token" type="hidden">
    <ul>
      <li>
        <label for="password">New password (must be at least 8 characters)</label>
        <input id="password" name="password" type="password"><div class="checkbox"></div>
      </li>
      <li>
        <label for="password_confirmation">Confirm Password</label>
        <input id="password_confirmation" name="password_confirmation" type="password" ><div class="checkbox"></div>
      </li>
      <li>
        <input class="button" id="submit-form" name="commit" type="submit" value="Save new password">

      </li>
    </ul>
  </div>
</form>

JavaScript

$(function() {
  $('.checkbox').hide();
  var pw = $("#password");
  var pwc = $("#password_confirmation");
  var submit = $("#submit-form");
  submit.attr("disabled", true);//Disable form at start
    
  pwc.on("blur", function(e) {
     ValidatePassword();
   });

   pwc.on("keyup", function(e) {
     ValidatePassword();
   });
    
    var ValidatePassword = function() {
        //Fetch both values
        var passwordVal = pw.val();
        var checkVal = pwc.val();
        
        //Validate the values
        console.log(passwordVal == checkVal && checkVal.length > 7);
        if (passwordVal == checkVal && checkVal.length > 7) {
            pw.attr("class", "validated");
            pwc.attr("class", "validated");
            submit.attr("disabled", false);
        }
    
        else {
            pw.attr("class", "error");
            pwc.attr("class", "error");
            submit.attr("disabled", true);
        }
    };    
});