JQuery/ Javascript text box text slides to label and mandatory field validation

I was thinking about an effect where on click or on focus the indicative text of text box become a label and slides animatedly to left. If one leaves the text box blank then the label again slides into text box and validation check is done.

Attached is the code. View the example at http://jsfiddle.net/rfL96u6c/

HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script  type="text/javascript" src="../js/textboxanim.js"></script>
<link href="../css/registration_page.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<form action="doRegistration" method="post">
<p>&nbsp;</p>
<div id="_registration_form_div">
<!-- Row -->
<div id="_registration_form_tr">
<div id="_registration_form_label"></div>
<div id="_registration_form_input">
<input name="" type="text" value="First Name *" maxlength="100"
class="_registration_form_input_textbox">
</div>
<div id="_registration_form_comments"></div>
</div>

<!-- Row -->
<div id="_registration_form_tr">
<div id="_registration_form_label"></div>
<div id="_registration_form_input">
<input name="" type="text" value="Last Name *" maxlength="100"
class="_registration_form_input_textbox">
</div>
<div id="_registration_form_comments"></div>
</div>
</div>
</form>

</body>
</html>

CSS
@charset "US-ASCII";

#_registration_form_tr {
display: table-row;
}

#_registration_form_div {
display:table;
}
#_registration_form_label{
display: table-cell;
padding-left: 5px;
padding-right: 5px;
min-width:100px;
max-width:150px;
width:20%;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #666;
}

#_registration_form_input{
display: table-cell;
padding-left: 5px;
padding-right: 5px;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
color: #666;
} 

#_registration_form_comments{
display: table-cell;
padding-left: 5px;
padding-right: 5px;
color: #F00;
font-family: "Times New Roman", Times, serif;
font-size: 10px;
font-weight: 700;
font-variant: normal;
text-transform: lowercase;
font-style: italic;
}
._registration_form_input_textbox {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
color: #666;

}

JAVASCRIPT/ JQUERY

/**
 * 
 */
$(function(){
/*Textbox click action.*/
$("._registration_form_input_textbox").focusin(
function(e) {
var boxText = $(this).val().trim();
var labelText = '';
/* remove any comment & warning from div */
var warnDiv = $(this).parent().next();
$(warnDiv).text('');
/* set the load time value as hidden attribute */
if ($(this).data('hidden') == undefined) {
$(this).data('hidden', boxText);
}
if ($(this).data('hidden') == boxText) {
var labelDiv = $(this).parent().prev();
var len = boxText.length;
for (var i = 0; i < len; i++) {
labelText = labelText + boxText.substring(0, 1);
boxText = boxText.substring(1, boxText.length);
setTimeout(createLabelAnimation($(this), labelDiv, boxText,
labelText), 24 * i);
}
}
});

/*Text box action on focus out*/
$("._registration_form_input_textbox").focusout(
function(e) {
var boxText = $(this).val().trim();
if (boxText.trim() == '') {
var labelDiv = $(this).parent().prev();
var labelText = labelDiv.text();
var len = labelText.length;
for (var i = 0; i < len; i++) {

boxText = labelText.substring(labelText.length - 1,
labelText.length)
+ boxText;
labelText = labelText.substring(0, labelText.length - 1);
setTimeout(createLabelAnimation($(this), labelDiv, boxText,
labelText), 24 * i);
}
/*
* check whether field is mandatory, if no flash message &
* warnings
*/
var warnDiv = $(this).parent().next();
if (boxText.charAt(boxText.length - 1) == '*') {
$(warnDiv).text("This is mandatory field");
}
}
});

});

var createLabelAnimation = function(textBox, labelDiv, textBoxText,
labelDivText) {
return function() {
$(textBox).val(textBoxText);
$(labelDiv).text(labelDivText);
};
};

Comments

Post a Comment

Popular posts from this blog

Caused by: java.sql.SQLTimeoutException: ORA-01013: user requested cancel of current operation

Many times we encounter this error and think that there might be some JPA issue or network issue. However, the error is pretty explicit in its nature, but still not clear to ring the bell very first time. As the error says there is a timeout, and since Oracle is saying, we shall accept it. Another clue is "user requested cancel of current operation". This means that the connection was closed by the application server not the database server, hence it can be safely concluded that application has configured timeouts on transactions at its end. However, if you feel that this transaction should have been concluded within the application server limits, your doubt might be true. This problem can arise in case there is a lock on the record being updated by JPA or lock on the table in which JPA is attempting to insert. The lock is most probably being held by some other application, and since application server configuration is on aggressive SLA, the transaction is waiting its
Read more

HashiCorp Vault Integration with Ansible Etower using approle

Image
HashiCorp Vault is  a secrets management tool specifically designed to control access to sensitive credentials in a low-trust environment . It can be used to store sensitive values and at the same time dynamically generate access for specific services/applications on lease.  Integrating the vault with Ansible Etower provides robust and secure automation. Following is the step-by-step guide for the integration. Enable key-value secret engine in Hashi Vault (also known as "kv" engine). Let's call the engine, the "kv" engine. Create a secret inside "kv". A secret can be a collection of key-value pairs or a JSON for nested structure.            Lets assume that secrets are stored as JSON  in the format   { "my_app":{ "service_account_name": "some_service", "service_account_password": "some_password" } } Create a secret policy defining what can be done with the above-defined secret. Create an
Read more

utility to extract date from text with java

Image
A date pattern recognition algorithm to not only identify date pattern but also fetches probable date in Java date format. This algorithm is very fast and lightweight. The processing time is linear and all dates are identified in a single pass. Algorithm resolves date using tree traverse mechanism. Tree data structures are custom created to build supported date, time and month patterns. Following Trees are used (Note: ^ sign denotes complete pattern) DATE PATTERN TREE Month Pattern Tree (Jan and January both are valid, identified using ^ sign) Time pattern (Identified as suffix to Date, $ sign indicates SPACE character) Tree structures are used in the following algorithm.  Date Part Identification algorithm flowchart Time part identification algorithm flowchart These flow charts are self-explanatory in most part. --> sign is used to denote next match in respective tree structures. The algorithm also acknowledges multipl
Read more