In this blog we will give you steps to set Popup Box on Password Field for check validation.

1. First Add Password field in Your blade file.

&ltdiv class="form-group {{ $errors-&gthas('password') ? ' has-error' : '' }}"&gt
          &ltlabel class="control-label" for="password"&gtPassword &ltspan class="colorRed"&gt *&lt/span&gt&lt/label&gt
            &ltdiv class=""&gt
                   &ltinput type="password" class="form-control" id="password" name="password" placeholder="Password" value="{{old('password')}}" autocomplete="off"/&gt
                     @if ($errors-&gthas('password'))
                        &ltspan class="help-block alert alert-danger"&gt
                               &ltstrong&gt{{ $errors-&gtfirst('password') }}&lt/strong&gt
                           &lt/span&gt
                         @endif
                &lt/div&gt
        &lt/div&gt

2. Add pop up for password field

Add this after complete form

&ltdiv id="pswd_info"&gt
  &ltp class="pp"&gt&ltb&gtPassword must have:&lt/b&gt&lt/p&gt
  &ltul&gt
    &ltli id="length" class="invalid" style="color:#9e9fa1;"&gtatleast 8 characters&lt/li&gt
    &ltli id="capital" class="invalid" style="color:#9e9fa1;"&gtatleast 1 uppercase&lt/li&gt
    &ltli id="letter" class="invalid" style="color:#9e9fa1;"&gtatleast 1 lowercase&lt/li&gt
    &ltli id="number" class="invalid" style="color:#9e9fa1;"&gtatleast 1 number&lt/li&gt
    &ltli id="special" class="invalid" style="color:#9e9fa1;"&gtatleast 1 special char&lt/li&gt
  &lt/ul&gt
&lt/div&gt

3. Add CSS for set Popup on password field

You can modify css as per your requirement

#pswd_info {
        position: absolute;
        bottom: 410px;
        left: 1229px;
        width: 144px;
        padding: 5px;
        background: #fefefe;
        font-size: .750em;
        border-radius: 5px;
        box-shadow: 0 1px 3px #ccc;
        border: 1px solid #ddd;
        height: 165px;
    }
    #pswd_info h4 {
        margin:0 0 10px 0;
        padding:0;
        font-weight:normal;
    }
    #pswd_info::before {
        content: "\25b6";
        position:absolute;
        top:62px;
        right:95%;
        font-size:30px;
        line-height:14px;
        color:white;
        text-shadow:none;
        display:block;
    }
    .invalid {
        background: url("{{ asset('resources/assets/img/invalid.png') }}") no-repeat 0 50%;
        padding-left:22px;
        line-height:24px;
        color:black;
    }
    .valid {
        background:url("{{ asset('resources/assets/img/valid.png') }}") no-repeat 0 50%;
        padding-left:22px;
        line-height:24px;


    }
    #pswd_info {
        display:none;
    }
    .pp{
    	font-size: 12px;
    	font-style: bold;
    }
    #pswd_info ul{
      padding: 0px;
    }
    #pswd_info li{
        list-style: none;
    }

4. Finally Add Script in Script Section

&ltscript&gt
    $(document).ajaxStart(function() {
        Pace.restart();
    });
    $(document).ready(function() {
      $('input[type=password]').keyup(function() {
      	$('#password_confirmation').on('keyup',function(){
          $('#pswd_info').hide();
      });
          // keyup event code here
      });
      $('input[type=password]').focus(function() {
          // focus code here
      });
      $('input[type=password]').blur(function() {

        $('#password').removeClass('valid');
          // blur code here
      });
       $('input[type=password]').keyup(function() {
          // keyup code here
      }).focus(function() {
          // focus code here

      }).blur(function() {
          // blur code here
      });

      $('#password').keyup(function() {
      // keyup code here
      var pswd = $(this).val();
      //validate the length
      if ( pswd.length &lt 8 ) {
          $('#length').removeClass('valid').addClass('invalid');
      } else {
          $('#length').removeClass('invalid').addClass('valid');
      }

      //validate letter
      if ( pswd.match(/[a-z]/) ) {
          $('#letter').removeClass('invalid').addClass('valid');
      } else {
          $('#letter').removeClass('valid').addClass('invalid');
      }

      //validate capital letter
      if ( pswd.match(/[A-Z]/) ) {
          $('#capital').removeClass('invalid').addClass('valid');
      } else {
          $('#capital').removeClass('valid').addClass('invalid');
      }

      //validate number
      if ( pswd.match(/\d/) ) {
          $('#number').removeClass('invalid').addClass('valid');
      } else {
          $('#number').removeClass('valid').addClass('invalid');
      }
      if (/^[a-zA-Z0-9- ]*$/.test(pswd) == false) {
          $('#special').removeClass('invalid').addClass('valid');
      } else {
          $('#special').removeClass('valid').addClass('invalid');
      }

      }).focus(function() {
          $('#pswd_info').show();
      }).blur(function() {
          $("#pswd_info").hide();

      });
    });
    $('#password_confirmation').on('click',function(){
     $('#pswd_info').hide();
    });
    &lt/script&gt

Now you can see popup box on password field like this:

When you add a proper validate value then the ticks will be in blue color.

The post How to create PopUp Box For check Password validation in Laravel appeared first on Lets Nurture - An IT Company Nurturing Ideas into Reality.