For J-Query Use Validation

For Online paath download  file link below :-

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

<script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

Html

<div class="miditem">    
  <form data-toggle="validator" role="form" action="thanks.php">
         
  <div class="form-group">
    <label for="inputName" class="control-label">Name</label>
    <input type="text" class="form-control" id="inputName" placeholder="Cina Saffary" required>
      <div class="myownerror"></div>
  </div>
         
         
  <div class="form-group">
    <label for="inputEmail" class="control-label">Email</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
    <div class="help-block with-errors"></div>
    <div class="emailerror"></div>
  </div>
         
         
  <div class="form-group">
    <label for="inputEmail" class="control-label">Phone Number</label>
    <input type="text" class="form-control" id="inputNumber" placeholder="Contact Number" required>
    <div class="numbererror"></div>
  </div>
         
  <div class="form-group">
    <label for="inputPassword" class="control-label">Password</label>
    <div class="form-inline row">
      <div class="form-group col-sm-6">
        <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
        <div class="help-block">Minimum of 6 characters</div>
        <div class="passerror"></div>
      </div>
   
      <div class="form-group col-sm-6">
        <input type="password" class="form-control" id="inputPasswordConfirm"  data-match-error="Whoops, these don't match" placeholder="Confirm" required>
        <div class="help-block with-errors"></div>
        <div class="confirmerror"></div>
      </div>
    </div>
  </div>
         

         
  <div class="form-group">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>
</div>


CSS

 h2{ font-size:14px; margin:0px; padding:0px; color:#FF0000; margin-top:5px;}

.miditem{ margin:0px auto; width:500px; margin-top:100px; border-radius:4px; border:2px solid #f3c309; padding:15px 18px;}


JS

<script type="text/javascript">
$(document).ready(function(e) {
   $('button').click(function(){
var Name = $('#inputName').val();

//For Name Section

if(Name == ' ')
{
$('.myownerror').html('<h2>Plese Enter Your Name</h2>');
}   else
{ $('.myownerror').empty();
}
  

  //For Email Section
  
  var EmailSite = $('#inputEmail').val();
 if(!EmailSite.match(/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/))
 {
 $('.emailerror').html('<h2>Plese Enter Your Valid Number</h2>');
 } 
 else
 {$('.emailerror').empty();
 }
  
 
  // For Mobile Number
  
  var MobileNumber = $('#inputNumber').val(); 
  
  if(!MobileNumber.match(/^(\+\d{1,3}[- ]?)?\d{10}$/))
  {
  $('.numbererror').html('<h2>Plese enter Valid Mobile Number</h2>');
  }
  else
  { $('.numbererror').empty(); 
  }
  
//For Passworld
var PassSite = $('#inputPassword').val() .length;
if(PassSite < 6)
{
$('.passerror').html('<h2>Plese enter At Vaild Pass</h2>');
}
else
{
$('.passerror').empty();
}


//For confirm Pass
var Confirm = $('#inputPasswordConfirm').val();
var PassValue = $('#inputPassword').val();
if(PassValue != Confirm )
{
$('.confirmerror').html('<h2>Plese Confirm Passworld</h2>');
}
else
{
$('.confirmerror').empty();
}
  }); 
});

</script>

No comments:

Post a Comment