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

Java Swing MySql JDBC: insert data into database

By
Program import javax.swing.*; import java.awt.*; import java.awt.event.*; import java.sql.*; public class insertswing implements ActionListener {   JFrame fr;JPanel po;   JLabel l1,l2,main;   JTextField tf1,tf2;   GridBagConstraints gbc;   GridBagLayout go;   JButton ok,exit; public insertswing(){ fr=new JFrame("New User Data "); Font f=new Font("Verdana",Font.BOLD,24); po=new JPanel(); fr.getContentPane().add(po); fr.setVisible(true); fr.setSize(1024,768); fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); po.setBackground(Color.WHITE); go=new GridBagLayout(); gbc=new GridBagConstraints(); po.setLayout(go); main=new JLabel("Enter User Details "); main.setFont(f); l1=new JLabel("Name  :");tf1=new JTextField(20); l2=new JLabel("User Name  :");tf2=new JTextField(20); ok=new JButton("Accept"); exit=new JButton("Exit"); gbc.anchor=GridBagConstraints.NORTH;gbc.gridx=5;gbc.gridy=0; go.s...
Post a Comment
Read more

Guidewire Policy - Spin Up Spin Off Transactions

By
Guidewire PolicyCenter - Spin Up and Spin Off Policy Job Transactions In Guidewire PolicyCenter, "spin up" and "spin off" refer to specific actions you can take with policy job transactions. These terms are related to how new policy transactions (such as renewals, endorsements, or cancellations) are created or modified. Here's an explanation of each: 1. Spin Up: "Spin up" refers to the process of creating a new policy job from an existing policy or transaction. When you "spin up" a policy job, you're essentially initiating a new transaction based on an existing policy. This new transaction could be a renewal, an endorsement, or any other type of policy change. For example: - Renewal : When a policy's term is about to expire, you might "spin up" a renewal job to create a new policy term based on the existing one. The new job will carry forward much of the existing policy's data but may allow for updates or cha...
Post a Comment
Read more

Guidewire Reinstatement and Rewrite

By
Guidewire Reinstatement, Rewrite Mid Term, Rewrite Full Term, and Rewrite New Term In Guidewire PolicyCenter, different types of policy transactions allow users to modify, renew, reinstate, or rewrite policies under various circumstances. Here’s an explanation of Reinstatement, Rewrite Mid Term, Rewrite Full Term, and Rewrite New Term, along with their similarities, differences, and example scenarios. 1. Reinstatement Definition: - Reinstatement is a process that brings a canceled policy back into force. This is typically done after a policy has been canceled due to non-payment or other reasons, and the insurer agrees to reinstate the policy, often after the insured has met certain conditions (e.g., paying outstanding premiums). Scenario Example: - A policyholder misses their premium payment, and the policy is canceled. After paying the overdue amount, the insurer reinstates the policy without any changes to the original policy terms and conditions. Key Points: - The poli...
Post a Comment
Read more