JSFiddle - React, Tailwind, and code Playground

by alachgar

HTML

<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>



<div class="form-group">
  <div class="col-xs-5">
    <label>Your password</label>
    <div class="input-group" id="show_hide_password">
      <input class="form-control" type="password" id="password1" placeholder="Password is at least 8 Caracters" autocomplete="off" minlength="8" required="required" />
      <div class="input-group-addon">
        <a href=""><i class="fa fa-eye-slash" aria-hidden="true"></i></a>
      </div>
    </div>
    <div style="color:red; font-size:13px;"> (Please write down this password, you will need it later on).</div>
  </div>
  <div class="validation"></div>

</div>

<div class="form-group">
  <div class="col-xs-5">
    <label>Your password</label>
    <div class="input-group" id="show_hide_password_conf">
      <input class="form-control" type="password" id="password2" placeholder="Password is at least 8 Caracters" autocomplete="off" minlength="8" required="required" />
      <div class="input-group-addon">
        <a href=""><i class="fa...

JavaScript

//Show Hide Password
$(document).ready(function() {
  $("#show_hide_password a").on('click', function(event) {
    event.preventDefault();
    if ($('#show_hide_password input').attr("type") == "text") {
      $('#show_hide_password input').attr('type', 'password');
      $('#show_hide_password i').addClass("fa-eye-slash");
      $('#show_hide_password i').removeClass("fa-eye");
    } else if ($('#show_hide_password input').attr("type") == "password") {
      $('#show_hide_password input').attr('type', 'text');
      $('#show_hide_password i').removeClass("fa-eye-slash");
      $('#show_hide_password i').addClass("fa-eye");
    }
  });
  $("#show_hide_password_conf a").on('click', function(event) {
    event.preventDefault();
    if ($('#show_hide_password_conf input').attr("type") == "text") {
      $('#show_hide_password_conf input').attr('type', 'password');
      $('#show_hide_password_conf i').addClass("fa-eye-slash");
      $('#show_hide_password_conf i').removeClass("fa-eye");
    } else if ($('#show_hide_password_conf input').attr("type") == "password") {
      $('#show_hide_password_conf input').attr('type', 'text');
      $('#show_hide_password_conf i').removeClass("fa-eye-slash");
      $('#show_hide_password_conf i').addClass("fa-eye");
    }
  });
});

//disable next button til password is validated
$(document).ready(function() {
  $('#nextBtn').attr('disabled', true);

  $('#password2').keyup(function() {
    if ($(this).val().length != 0) {
      $('#nextBtn').attr('disabled', false);
    } else {
      $('#nextBtn').attr('disabled', true);
    }
  })
});


// Password validation 
$('#nextBtn').on('click', function() {
  if ($('#password2').val() !== $('#password1').val()) {
    alert("Your password doesn't match, please try again !");
    return true;
  }

})