Add Phone Number And Email Validation Using JQuery

In this topic,

We are going to see how to add validation to the registration form.

Step1: include jQuery file

include jQuery min file

Download js from jquery.com

include Validation jQuery

Download js from here.

Step2: Create Html form

Here, include downloaded jquery files in your HTML.

Review below code.

At the last above </body> tag include your js files.

<form id="register-form1" action=" " method="post" role="form" enctype="multipart/form-data">
    <div class="container">
      <h1>Register</h1>
      <p>Please fill in this form to create an account.</p>
      <hr>
  
      <label for="email"><b>Nmae</b></label>
      <input type="text" name="fname" id="fname" class="FristName"
      placeholder="Frist Name" value="">
      <p class="error"></p>
  
      <label for="email"><b>Email</b></label>
      <input type="text"	name="email" id="email"	class="email"
      placeholder="Email ID" value="">
      <p class="error"></p>
  
      <label for="psw"><b>Password</b></label>
      <input type="password" name="password" id="password" class="password"
      placeholder="Password">
      <p class="error"></p>
  
  
      <label for="phone-num"><b>Phone Number</b></label>
      <input type="text" name="phone" id="phone" class="phone"
      placeholder="Phone Number">
      <p class="error"></p>
  
      <button type="submit" class="registerbtn">Register</button>
    </div>
    
    <div class="container">
      <p>Already have an account? <a href="#">Sign in</a>.</p>
    </div>
  </form>

  <script src="js/jquery.js"></script>
  <script src="js/jquery.validate.min.js"></script>
  <script src="js/custom.js"></script>

Step3: Add CSS

.error{
    color:#aa040c;
}

.container {
  padding: 16px;
  background-color: white;
}

input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}


hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}

.registerbtn {
  background-color: #aa040c;
  color: white;
  padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.registerbtn:hover {
  opacity: 1;
}

a {
  color: dodgerblue;
}

Step4: Add jQuery

jQuery(document).ready(function(){

  jQuery('#register-form1').validate({
    rules:{
      fname:"required",
      email:{
        required:true,
        email:true	
       },
       password:"required",
       phone:{
        required:true,
        minlength:9,
        maxlength:10,
        number: true
       },
    }
    });
  jQuery( '#register-form1' ).submit(function(event){
    event.preventDefault();
    var first_name		 = jQuery( '#fname' ).val();
    var email 			 = jQuery( '#email' ).val();
    var pass	 = jQuery( '#password' ).val();
    if(first_name != "" && email!= "" && pass!= "" ){
            alert("register");
            location.reload(true);

    }
  });

});

Review the below video.