Skip to main content

Input Text Validation using BootStrap CSS and JQuery

By
HTML Code:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta charset="utf-8">
  <title>Text Input Validation</title>
</head>
<body>
  <strong>Enter any Data:<strong><br/>
<input type="text" class="btn-lg btn-default" id="test"/>
  <span id='testvalid'></span>
</body>
</html>

JQuery Script Code

$(document).ready(function(){
   
  //Blur Event checks the input field when it loses focus
  
  $('#test').blur(function(){
   
    //checks text value empty
    if($(this).val()==''){
      
     $('#test').addClass("btn-lg btn-danger");
      $('#testvalid').html("<span style='color:white;background-color:maroon;border-radius:7px;border-width:10px;box-shadow: 3px 3px 5px #999'>&nbsp; &#x2717 &nbsp;</span>");   
     
    }    
    else{
      $('#testvalid').html('');
      $('#test').addClass("btn-lg btn-default");
      
  
    }                  
  });
  
  //keyup event checks user giving entering data
  $('#test').keyup(function(){
        
    if($(this).val()!=''){
   $('#testvalid').html('');
      $('#test').removeClass("btn-danger");  
    }
                  
  });

 });

Output:

 Demo: 
Click here to Live Preview

Labels:

Comments

  1. BloggerThursday, 5 March 2020 at 15:13:00 GMT+5:30

    Did you realize there's a 12 word sentence you can speak to your crush... that will induce intense emotions of love and instinctual appeal for you deep within his chest?

    That's because hidden in these 12 words is a "secret signal" that triggers a man's instinct to love, adore and look after you with his entire heart...

    ====> 12 Words Will Trigger A Man's Love Impulse

    This instinct is so built-in to a man's brain that it will make him work harder than before to to be the best lover he can be.

    As a matter of fact, fueling this all-powerful instinct is so mandatory to achieving the best ever relationship with your man that as soon as you send your man a "Secret Signal"...

    ...You'll soon find him open his soul and mind to you in a way he never experienced before and he will distinguish you as the one and only woman in the world who has ever truly interested him.

    ReplyDelete

Post a Comment

Share this to your friends

Popular posts from this blog

Guidewire Rating detailed explanations

By
Guidewire Rating is a critical component of Guidewire PolicyCenter that handles the calculation of insurance premiums based on various factors, such as risk characteristics, coverage options, and discounts. Here's a detailed explanation of how Guidewire Rating works, its components, and how it can be configured and extended. 1. Overview of Guidewire Rating Guidewire Rating is responsible for determining the price of an insurance policy by applying rating logic, rules, and algorithms to the insured's data. The rating process involves evaluating factors like the type of coverage, the insured risk (e.g., the driver’s record, vehicle type in auto insurance), and the chosen limits and deductibles. The output is a premium amount that the policyholder must pay. 2. Key Components of Guidewire Rating a. Rating Engine The Rating Engine is the core system within PolicyCenter that processes rating inputs and outputs premium calculations. It interprets rating formulas, applies them to speci...
Post a Comment
Read more

JSP and Servlet Form Submission without page refresh show results on the same page using Jquery AJAX

By
Code Snippet HTML Form  <form id='ajaxform' name='ajaxform' action='ajaxformexample' method='post'>  First Name: <input type='text' id='firstname' name='firstname' size='30' required/><br/>  Last Name: <input type='text' id='lastname' name='lastname' size='30'required/><br/>  Email:  <input type='email' id='emailid' name='emailid' size='30'required/><br/>  Password:  <input type='password' id='pwd' name='pwd' size='30'required/><br/>  <input type='Submit'/>   <div id='content'> </div> </form> the above HTML Form uses post method and url servlet redirect to " ajaxformexample " Javascript Code  var form = $('#ajaxform'); // id of form tag  form.submit(function () {  $.ajax({  ...
46 comments
Read more

Login and Registration forms in C# windows application with Back end Microsoft SQL Server for data access

By
In this article, I'm gonna share about how to make login and register form with MS SQL database; 1. Flow Chart Logic 2. Normal Features 3. Form Designs Login Form Design Sign in Form Design Password Retrieve Form 4. Database Design and SQL queries and Stored Procedure Create new Database as "schooldata" create table registerdata (  ID int identity,  Username nvarchar(100),  Password nvarchar(100),  Fullname  nvarchar(100),  MobileNO nvarchar(100),  EmailID nvarchar(100)  ) select * from registerdata create procedure regis (  @Username as nvarchar(100),  @Password as nvarchar(100),  @Fullname as nvarchar(100),  @MobileNO as nvarchar(100),  @EmailID as nvarchar(100)  ) as begin insert into registerdata (Username, Password, Fullname, MobileNO,EmailID) values (@Username, @Password, @Fullname, @MobileNO, @EmailID) ...
36 comments
Read more