index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Validation in JS</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style type="text/css">
    body{
      background-image: url('img (3).jpg');
      background-repeat: no-repeat;
      background-size: cover;

    }

    #home,#menu1,#menu2{
      background-color: rgba(0,0,0,0.7);
      color: white;
      padding: 20px;
    }
  </style>
</head>
<body>

<div class="container mt-3">
  <h2 class="bg-dark text-center text-white p-2">Jquery Validations with message/without message</h2>
  <br>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Form one</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">Form Two</a>
    </li>
     <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">File Validation</a>
    </li>
    
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active mb-50" ><br>
      <h3 class="text-center">Form Validation With Border Red</h3>
      <hr>
      <div class="row">
        <div class="col-md-6 mx-auto">
      <div class="form-group">
        <label>Username:<span class="text-danger">(*Only Alphabet Validation on text field)</span></label>
        <input type="text" name="username" id="username" class="form-control" placeholder="Enter Username">
        </div>
        <div class="form-group">
          <label>Select User:</label>
        <select class="form-control" id="user_type" name="user_type">
          <option value="">--SELECT USER--</option>
          <option value="admin">Admin</option>
          <option value="user">User</option>
          
        </select>
        </div>
        <div class="form-group">
          <label>Email:</label>
          <input type="email" name="user_email" id="user_email" placeholder="Enter Email" class="form-control" onblur="validateEmail(this);">
        </div>
        <div class="form-group">
          <label id ="gender_error">Gender:</label>
          <input type="radio" name="gender" id="male">Male
          <input type="radio" name="gender" id="female">Female
        </div>

        
    <div class="form-group">
      <label>Mobile:<span class="text-danger">(*Only Number with length Validation on text field)</span></label>
      <input type="text" name="mob" id="mob" class="form-control" placeholder="Enter Your mobile number"onkeyup="return check_number();">
    </div>

    <div class="form-group" id="checkbox_error">
      <input type="checkbox" name="agree" id="agree">I Agree
    </div>
    <button class="btn btn-primary" id="insert">Submit</button>

    </div>
    
    </div><!--End of Row-->
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3 class="text-center">Form Validation With Error Message</h3>
      <div class="row">
        <div class="col-md-6 mx-auto">
      <div class="form-group">
        <label>Username:<span class="text-danger">(*Only Alphabet Validation on text field)</span></label>
        <input type="text" name="username" id="user_name" class="form-control" placeholder="Enter Username">
        <span class="text-danger" id="username_error_msg"></span>
        </div>
        <div class="form-group">
          <label>Select User:</label>
        <select class="form-control" id="User_type" name="user_type">
          <option value="">--SELECT USER--</option>
          <option value="admin">Admin</option>
          <option value="user">User</option>
          
        </select>
         <span class="text-danger" id="usertype_error_msg"></span>
        </div>
        <div class="form-group">
          <label>Email:</label>
          <input type="email" name="user_email" id="User_Email" placeholder="Enter Email" class="form-control">
          <span class="text-danger" id="email_error_msg"></span>
        </div>
        <div class="form-group">
          <label>Gender:</label>
          <input type="radio" name="Usergender" id="male" required>Male
          <input type="radio" name="Usergender" id="female" required>Female
            <span class="text-danger" id="Usergender_error_msg"></span>
        </div>

        
    <div class="form-group">
      <label>Mobile:<span class="text-danger">(*Only Number with length Validation on text field)</span></label>
      <input type="text" name="mobile_no" id="mobile_no" class="form-control" placeholder="Enter Your mobile number" onkeyup="return check_Mobnumber();">
        <span class="text-danger" id="mob_error_msg"></span>
    </div>

    <div class="form-group">
      <input type="checkbox" name="agree" id="i_agree">I Agree
       <span class="text-danger" id="chkbox_error_msg"></span>
    </div>
    <button class="btn btn-primary" id="submit">Submit</button>

    </div>
    
    </div><!--End of Row-->
    </div>

     <div id="menu2" class="container tab-pane fade"><br>
      <h3 class="bg-dark text-white text-center">Form Validation With Error Message</h3>
      <div class="row">
        <div class="col-md-6 mx-auto">
        	<div class="form-group">
        		<input type="file" name="upload_img" id="upload_img" class="form-control">
        		<span id="spanFileName"></span>
        	</div>
        	 <button type="button" class="btn btn-primary" id="upload_file">Upload File</button>
        </div>
      </div><br>
<div class="row">
 
<div class="col-md-6 mx-auto">
  <h3 class="bg-dark text-white text-center">Form Validation For Images</h3>
          <div class="form-group">
            <input type="file" name="upload_img_file" id="upload_img_file" class="form-control" onchange="return fileValidation()">
            <span id="file_error"></span>
          </div>
           <button type="button" class="btn btn-primary" id="upload_img_file">Upload File</button>
        </div>       
    
    </div><!--End of Row-->
    </div>
    
  </div>
</div>
<script type="text/javascript">
  $(document).ready(function(){

//Validation for text only 
 $("#username").on("input", function(){
  var regexp = /[^a-zA-Z]/g;
  if($(this).val().match(regexp)){
    $(this).val( $(this).val().replace(regexp,'') );
    $("#username").css("border-color","red");
        setTimeout("$('#username').css('border','')",6000);
        return false;
  }
});

 //Checking for only numbers from user
$("#mob").keyup(function(){
var itv_mobile = $("#mob").val();
    if(isNaN(itv_mobile)){
       $("#mob").css("border-color","red");
       $("#mob").focus();
       $("#mob").val("");
        setTimeout("$('#mob').css('border','')",6000);
        return false;
    }
    
});


    $(document).on("click","#insert",function(){
      //Validation for form one with border color
      var username = $("#username").val();
      var user_type = $("#user_type").val();
      var user_email = $("#user_email").val();
       var mob = $("#mob").val();

       
       if(username == ""){
        $("#username").css("border","2px solid red");
        $("#username").focus();
        setTimeout("$('#username').css('border','')",3000);

        return false;
        }

        if(user_type == ""){
          $("#user_type").css("border","2px solid red");
          $("#user_type").focus();
        setTimeout("$('#user_type').css('border','')",3000);
        return false;


        }

        if(user_email == ""){
          $("#user_email").css("border","2px solid red");
          $("#user_email").focus();
        setTimeout("$('#user_email').css('border','')",3000);
        return false;


        }

        if($('input[type="radio"]:checked').length==0){
      $("#gender_error").css("border","2px solid red");
        setTimeout("$('#gender_error').css('border','')",3000);
        return false;
       }

      
        if(mob == ""){
          $("#mob").css("border","2px solid red");
          $("#mob").focus();
        setTimeout("$('#mob').css('border','')",3000);
        return false;


        }

        if(mob.length > 10){
          $("#mob").css("border","2px solid red");
          $("#mob").focus();
        setTimeout("$('#mob').css('border','')",3000);
        return false;


        }
        if(mob.length < 10){
          $("#mob").css("border","2px solid red");
          $("#mob").focus();
        setTimeout("$('#mob').css('border','')",3000);
        return false;


        }

       
          if($('input[type="checkbox"]').prop("checked") == false){

            $("#checkbox_error").css("border","2px solid red");
            setTimeout("$('#checkbox_error').css('border','')",3000);
              

          }
          
       
    });

  });

  function check_number(){
    var mob = $("#mob").val();
    if(isNaN(mob)){
      //alert("Only Numbers are allowed");
      $("#mob").val("");
      $("#mob").css("border","2px solid red");
          $("#mob").focus();
        setTimeout("$('#mob').css('border','')",3000);
      return false;

    }

  }


/* For Email validation  */
  function validateEmail(emailField){
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

        if (reg.test(emailField.value) == false) 
        {
            $("#user_email").focus();
             $("#user_email").css("border-color","red");
             setTimeout("$('#user_email').css('border','')",6000);
            return false;
        }
        else{
            $("#email_error").text("");
             $("#email_error").css("color","");
             $("#user_email").css("border-color","green");
             setTimeout("$('#user_email').css('border','')",6000);
        return true;
      }

}


</script>

<script type="text/javascript">
  $(document).ready(function(){

//Validation for text only 
 $("#user_name").on("input", function(){
  var regexp = /[^a-zA-Z]/g;
  if($(this).val().match(regexp)){
    $(this).val( $(this).val().replace(regexp,'') );
    $("#user_name").css("border-color","red");
       $("#username_error_msg").text("Please Enter Text Only");

        setTimeout("$('#user_name').css('border','')",3000);
        setTimeout("$('#username_error_msg').text('')",3000);
        return false;
  }
});


 //Checking for only numbers from user
$("#mobile_no").keyup(function(){
var itv_mobile = $("#mob").val();
    if(isNaN(itv_mobile)){
       $("#mobile_no").css("border-color","red");
       $("#mobile_no").focus();
       $("#mobile_no").val("");
        $("#mob_error_msg").text("Please Enter Valid Mobile Number");
        setTimeout("$('#mobile_no').css('border','')",3000);
        setTimeout("$('#mob_error_msg').text('')",3000);
        return false;
    }
    
});

    $(document).on("click","#submit",function(){
      //Validation for form one with border color

      var user_name = $("#user_name").val();
      var User_type = $("#User_type").val();
      var User_Email = $("#User_Email").val();
       var mobile_no = $("#mobile_no").val();

       
       if(user_name == ""){
        $("#user_name").css("border","2px solid red");
        $("#user_name").focus();
        $("#username_error_msg").text("Please Enter Username");

        setTimeout("$('#user_name').css('border','')",3000);
        setTimeout("$('#username_error_msg').text('')",3000);
        return false;
        }

        if(User_type == ""){
          $("#User_type").css("border","2px solid red");
          $("#User_type").focus();
          $("#usertype_error_msg").text("Please Select  User Type");

        setTimeout("$('#usertype_error_msg').text('')",3000);
        setTimeout("$('#User_type').css('border','')",3000);
        return false;


        }

        if(User_Email == ""){
          $("#User_Email").css("border","2px solid red");
          $("#User_Email").focus();
          $("#email_error_msg").text("Please Select User Email");

        setTimeout("$('#email_error_msg').text('')",3000);
        setTimeout("$('#User_Email').css('border','')",3000);
        return false;


        }

        if($('input[type="radio"][name="Usergender"]:checked').length == 0){
      //$("#Usergender_error_msg").css("border","2px solid red");
      $("#Usergender_error_msg").text("Please Select Gender");

        setTimeout("$('#Usergender_error_msg').text('')",3000);

        return false;
       }

      
        if(mobile_no == ""){
          $("#mobile_no").css("border","2px solid red");
          $("#mobile_no").focus();
          $("#mob_error_msg").text("Please Enter Mobile Number");
        setTimeout("$('#mobile_no').css('border','')",3000);
        setTimeout("$('#mob_error_msg').text('')",3000);
        return false;


        }

        if(mobile_no.length > 10){
          $("#mobile_no").css("border","2px solid red");
          $("#mobile_no").focus();
          $("#mob_error_msg").text("Please Enter 10 digit Number");
        setTimeout("$('#mob_error_msg').text('')",3000);
        setTimeout("$('#mobile_no').css('border','')",3000);
        return false;


        }
        if(mobile_no.length < 10){
          $("#mobile_no").css("border","2px solid red");
          $("#mobile_no").focus();
           $("#mob_error_msg").text("Please Enter 10 digit Number");
        setTimeout("$('#mob_error_msg').text('')",3000);
        setTimeout("$('#mobile_no').css('border','')",3000);
        return false;


        }

       
          if($('input[type="checkbox"]').prop("checked") == false){

            $("#checkbox_error").css("border","2px solid red");
            $("#chkbox_error_msg").text("Please Check Agreement");
            setTimeout("$('#checkbox_error').css('border','')",3000);
            setTimeout("$('#checkbox_error').text('')",3000);
              

          }
          
       
    });

  });

  function check_Mobnumber(){
    var mobile_no = $("#mobile_no").val();
    if(isNaN(mobile_no)){
      //alert("Only Numbers are allowed");
      $("#mobile_no").val("");
      $("#mob_error_msg").text("Please Enter Only Number");
        setTimeout("$('#mob_error_msg').text('')",3000);
      return false;

    }

  }


</script>

<script type="text/javascript">
	
	$(document).ready(function(){
 $("#upload_file").prop("disabled",true);
//File validation 
$('#upload_img').on("change",function () {

                var CurrentFileSize = this.files[0].size/1024;//Geeting current file size in KB
                //alert(CurrentFileSize);
                var ReqFileSize = 190;//190 KB

                var fileExtension = ['pdf','doc','docx','txt'];
                if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                    // alert("Only '.jpeg','.jpg' formats are allowed.");
                    $('#spanFileName').html(this.value);
                   
                    $("#upload_file").prop("disabled",true);
                    $("#spanFileName").text("Please upload file having extensions .jpeg/.jpg/.png/.gif only.");
                    $("#spanFileName").css("color","red");
                    $("#upload_img").css("border-color","red");
                    setTimeout("$('#upload_img').css('border','')",6000);
                    setTimeout("$('#spanFileName').text('')",6000);
                    return false;
                }
                //Checking file size for validation
                else if(CurrentFileSize >= ReqFileSize) {

                    $("#upload_file").prop("disabled",true);
                    $("#spanFileName").html("File Size should be 190KB or Less, Your File Size is"+ CurrentFileSize+ "KB");
                    $("#spanFileName").css("color","red");
                    $("#upload_img").css("border-color","red");
                    setTimeout("$('#upload_img').css('border','')",6000);
                    setTimeout("$('#spanFileName').text('')",6000);
                      $(this).val('');
                }
                
                else {
                    $('#spanFileName').html(this.value);
                   //do what ever you want
                   $("#upload_file").prop("disabled",false);
                   return true;
                } 
 });
 $("#upload_file").click(function(){
var file_name = $('#upload_img').val();
//alert(file_name);
 });


	});
</script>

<script>
function fileValidation(){
    var fileInput = document.getElementById('upload_img_file');
    var filePath = fileInput.value;
    var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
    if(!allowedExtensions.exec(filePath)){
        //alert('Please upload file having extensions .jpeg/.jpg/.png/.gif only.');
        $("#file_error").text("Please upload file having extensions .jpeg/.jpg/.png/.gif only.");
        $("#file_error").css("color","red");
        $("#upload_img_file").css("border-color","red");
             setTimeout("$('#upload_img_file').css('border','')",6000);
             setTimeout("$('#file_error').text('')",6000);
        fileInput.value = '';
        return false;
    }else{
        //Image preview
        if (fileInput.files && fileInput.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('imagePreview').innerHTML = '<img src="'+e.target.result+'"/>';
            };
            reader.readAsDataURL(fileInput.files[0]);
        }
    }
}
</script>


</body>
</html>