Self-checking html input boxes

Download Files & Sources

In this tutorial we will build some extended html

<input type="text">

We can do this using Java Server Pages technology's custom tag libraries.

Custom tag libraries extends the basic html tags with programmer defined elements and adds new functions to html this way. From that point a java developer invented a new tag this tag can be used byn any web disigners and html coders without any (or merely some basic) programming knowledge. So web programmers who not familiar with java also can enjoy the advantages of these technologies.

We will use NetBeans IDE 4.0 to develop our new html tags. This amazing environment provides everything we will need to develop JSP custom tag libraries rapidly and very simple way.

Developing our custom tag library and java tag handlers with NetBeans 4.0

The following main steps I will walk you through:

• Setting up a new web application with NetBeans IDE 4.0
• Creating a tag library descriptor for our new html elements
• Creating java tag handlers
• Using your new tags in a jsp page
• Putting some javascript code into your jsp
• Build and run the project

Setting up a new web application with NetBeans IDE 4.0

1. Start your NetBeans and in the main menu choose File > New Project. Under categories select Web and project let be a Web Application. Click Next. On next page type SelfcheckingTags as the project name and brows into a pleasing folder where you want the IDE to create your project folder. Click finish.

2. You can check your project folder and its contents in the IDE: press Ctrl+1 to view the Project window and Ctrl+2 to for File window. The IDE created a default index.jsp file and the always needed WEB-INF folder for you.

Creating a tag library descriptor for our new html elements

1. First we have ti create a tag library descriptor. This is a file with xml syntax that contains information about the tag we are developing. Describes its name, atributes, the datatypes for these values etc. that is it defines the tag. Right click on your project's name in the Project window of the IDE, select New > File/Folder then Web and Tag Library Descriptor as file type. Click Next and on the upcoming screen type selfcheckers as file name and sfchk as prefix below. Leave any other inputs as they are.

2. Then IDE creates for you a descriptor file named selfcheckers.tld in the WEB_INF/tlds folder. You can see below, how our descriptor file will look like.
   Don't type in this code now, we will create the content of the descriptor file with later with a user-friendly mechanism of NetBeans IDE.

   <tag>
       <name>xinput</name>
       <tag-class>com.zsoltkiss.web.customtags.selfcheckers.XInput</tag-class>
       <body-content>empty</body-content>
   
       <attribute>
         <name>id</name>
         <required>true</required>
         <type>java.lang.String</type>
   
       </attribute>
       <attribute>
         <name>pattern</name>
         <required>true</required>
         <rtexprvalue>true</rtexprvalue>
   
         <type>java.lang.String</type>
       </attribute>
       <attribute>
         <name>allowedEmpty</name>
         <rtexprvalue>true</rtexprvalue>
   
         <type>boolean</type>
       </attribute>
       <attribute>
         <name>message</name>
         <rtexprvalue>true</rtexprvalue>
   
         <type>java.lang.String</type>
       </attribute>
     </tag>
     <tag>
       <name>xiudv</name>
   
       <tag-class>com.zsoltkiss.web.customtags.selfcheckers.XInputUDV</tag-class>
       <body-content>empty</body-content>
       <attribute>
         <name>id</name>
   
         <required>true</required>
         <type>java.lang.String</type>
       </attribute>
       <attribute>
         <name>maxlength</name>
   
         <rtexprvalue>true</rtexprvalue>
         <type>int</type>
       </attribute>
       <attribute>
         <name>method</name>
   
         <required>true</required>
         <rtexprvalue>true</rtexprvalue>
         <type>java.lang.String</type>
       </attribute>
   
     </tag>
   
   

   Let's study a little the tag descriptors. These entries defines two tags, that web developer can use as the following:

   <sfchk:xinput id="" pattern="" allowedEmpty="" message="" />
   <sfchk:xiudv id="" maxlength="15" validator="" />
   

   And the explanation is: sfchk is a prefix that identifies our tag library. If we might create later another tags not related to these it's practical to separate them into another folder with an own prefix.
   The id is the normally used html element id.
   In the pattern attribute web developer can specify a regular expression that describes what inputs the input element must accept and what musn't. For example if you specify

   pattern="/^[0-9]{1,}$/"

   this rule means that only positive integers and zero value can be put in the input box. (If you are not familiar with regular expressions, consult a JDK's javadoc or some Java or JavaScript books.)
   The allowedEmpty attribute is a little bit tricky. If set to false, user can not continue editing while he doesn't type a valid value in the input box. The cursor will be put back again and again into the box.
   With message attribute developer can specify a message to be popped up to the user if he/she entered not valid value.
   The method attribute can only be used in <sfchk:xiudv /> element, that allows the developer to define an own javascript checker method for validating the xinput field's content. (By the way, xiudv stands for extended input user defined validation.)

Creating java tag handlers

1. Now we have our tag ibrary descripors and it's time to write some real java code. Let's continue with tag handler classes.
   Tag handler classes' task is interpreting for web containers what to do when they encounter a non-standard html tag during the parsing process of the page's source code. We have to create one tag handler for our each unique tags. To do this, right click on the project's nam, choose New > File/Folder, then select Web and Tag Handler as file type. Then click Next.

2. On the upcoming page type XInput as class name, com.zsoltkiss.web.customtags.selfcheckers as package name (or use your own package structure) and leave the SimpleTagSupport radio button checked. Click Next. On next page leve checked the Add Corresponding Tag To Tag Library Descriptor and with Browse show your tld file to the IDE. Modify the tagname to xinput with full small letters (no any capitals), set Body Content as empty add tag attributes with New as follows:

   • name: id, type: String, required:t rue, request time eval.: true
   • name: pattern, type: String, required: true, request time eval.: true
   • name: allowedEmpty, type: boolean, required: false, request time eval.: true
   • name: message, type: String, required: false, request time eval.: true
   Click finish. This was when the IDE created the content of your .tld file and not episodically the XInput.java skeleton source file..

3. Based on the previous step create your second tag handler class named XInputUDV, for a tag named xiudv with the following attributes:

   • name: id, type: String, required: true, request time eval.: true
   • name: maxlength, type: int, required: false, request time eval.: true
   • name: method, type: String, required: true, request time eval.: true
   Now your have two skeleton java tag handler files and your tag library descriptor is complete. Let's se how java files looks like.

4. Search XInput.java's doTag() method and the line that says:

   if(f != null) f.invoke(out);

   
   Directy after this line type the following code:

   out.print("<input type=\"text\" name=\"" + id + "\" id=\"" + id + "\" onblur=\"validate(this," + pattern +",");
   if(allowedEmpty) {
   	out.print("true,");
   }else {
       out.print("false,");
   }
               
   if(message != null) {
   	out.print("'" + message + "'");
   }else {
       out.print("''");
   }
               
   out.print(");\">\n");
   

   Similarly add this code fragement to your XInputUDV.java file starting at same point as preceeding:

   out.print("<input type=\"password\" name=\"" + id + "\" id=\"" + id + "\" ");
   if(maxlength > 0) {
   	out.print("maxlength=\"" + maxlength + "\" ");
   }
               
   out.print("onblur=\"" + method + "(this);\">\n");
   

   These code fragments do simple outputting into the html source on those places, where the parser encounters an sfchk:xinput or sfchk:xiudv tags. As a matter of fact these tag handlers relieves developer of work: he or she doesn't have to type the same user input checking methods and tricks again and again.

Using your new tags in a jsp page

1. At this point your java is finished. Waht has left is modify the index.jsp. Let's try to make our new tags work. Put the following code fragement into your index.jsp betwen the <bodx></bodye>:

   <table border="1" cellpadding="3">
           <form name="form1" onsubmit="return CheckForm()">
   
   	<th colspan="2" bgcolor="#f5f5dc" style="font-family:Courier;letter-spacing:2px;">Selfchecking inputs</th>
           <tr bgcolor="#ffdab9">
               <td style="font-family:Courier;color:navy;font-weight:bold;">Positive integer and zero</td>
               <td align=right>
                   <sfchk:xinput id="numOnly" pattern="/^[0-9]{1,}$/" allowedEmpty="false" message="You are allowed only positive integer and and zero." />
   
               </td>
           </tr>
           
           <tr bgcolor="#ffff00">
               <td style="font-family:Courier;color:navy;font-weight:bold;">Signed integer with two digit accurence (the plus or minus sign must be typed)</td>
               <td td align=right>
   
               	<sfchk:xinput id="digits" pattern="/^(\+|\-)\d{1,}\.\d{2,2}$/" allowedEmpty="true" message="Only signed float with two digit followed the decimal point allowed." />
               </td>
   		</tr>
   	
   		<tr bgcolor="#ffdab9">
               <td style="font-family:Courier;color:navy;font-weight:bold;">Valid ZIP Code in Budapest, Hungary: has to start with 1, second digit can be 0, 1, or 2, third and fourth digit can be any number</td>
   
               <td td align=right>
   		<sfchk:xinput id="zipOnly" pattern="/^1(0|1|2)\d\d$/" allowedEmpty="true" message="Enter only valid ZIP code in Budapest, Hungary" />
               </td>
   		</tr>
   	
   		<tr bgcolor="#ffff00">
               <td td style="font-family:Courier;color:navy;font-weight:bold;">E-mail address form</td>
   
               <td>
   		<sfchk:xinput id="mailOnly" pattern="/.{1,}@.{1,}\.\D{2,3}$/" allowedEmpty="true" message="Enter only e-mail address form." />
               </td>
           </tr>
           
           <tr bgcolor="#ffdab9">
               <td style="font-family:Courier;color:navy;font-weight:bold;">Username (arbitrary here but used in password checking below )</td>
   
               <td td align=right>
                   <input type="text" readonly id="username" value="zsolt">
               </td>
           </tr>
           
           <tr bgcolor="#ffff00">
               <td style="font-family:Courier;color:navy;font-weight:bold;">
   
                   Secure password that matches a policy<br>
                   (min 8, max 15 characters, at least two numbers, mixed small and capital letters, mustn't contain username)
                       
               </td>
               <td td align=right>
                   <sfchk:xiudv id="securePW" maxlength="15" method="isSecure" />
               </td>
   
           </tr>
   				
       </table><br>
   	<span style="font-family:Courier;color:navy;font-weight:bold;">
   			These form inputs are extends the basic html text inputs providing a "self checking method" when user types
   			te input. Permitted inputs are ruled by a JSP tag library where programmer can define his/her own often used
   			inputs and the rules (javascript checker methods) that do checking. The page must include these javascript 
   			checker methods as an outer .js file.
   	</span>
   

   These lines build up an simple html form using with our new tags. If you study the syntax used at xinput and xiudv elements you can see examples, how to parameterize them.
   First xinput element accepts only positive intgers, second accepts signed integer with two digit after decimal point, the third one allows user type in only a given ZIP code format, the fouth does e-mail address checking. Fifth input element is a standard html input and used only to help checking the fifth input that is an xiudv element. The fifth one is interesting also because its method attribute gives developer the chance to specify what javascript method should run to validate.
   

2. There is one more important thing related the jsp part of the code, namely put a <%@taglib %> directive in the top of code directy after the the <%@page %> directives... This line identifies the tag library so it says to the jsp how to resolve the tag names and prefixes. The line to be put is:

   <%@taglib prefix="sfchk" uri="/WEB-INF/tlds/selfcheckers"%>
   

Putting some javascript code into your jsp

1. Our last thing to do before run the application to add javascript checker methods. Without this our new tags won't revive. You might ask what was teh meaning of the whole stuff so far it's needed us to write javascript too? Don't forget, this javascript you have to write only once. Create a bunch of javascript checker methods, put them into an outer .js file and use them with the now develpoed extended input elements anytime! This is the meaning. So, let's see the javascript:

   <script type="text/javascript">
   function validate(obj,pattern,empty,message) {
   	var input = obj.value;
   	if(input.search(pattern) == -1) {
   		alert(obj.name + ":\n" + message);
   		if(!empty) {
   			obj.select();
   			obj.focus();
   		}else {
   			obj.value = "";
   		}
   		return false;
   	}
   	return true;
   }
   
   function isSecure(obj) {
       var pwOK = true;
       var errorMessage = obj.name + ": ERROR!\n----------------------";
   
       var input = new String(obj.value);
       //alert(input.length);
       var minlength = 8;
           
                                                       //must not contain user name
       var startnum = /^\d/;                           //must not start with number
       var endnum = /.{1,}\d$/;                        //must not end with number
       var specialChars=/(@|-|_|,|\.)/;                //these special chars are not allowed (the chars must be OR-ed for the code work!)('\.' means the dot)
       var space=/\s/;                                 //must not contain spaces
       var numbers=/\d/g;                              //must contain at least two numbers
       var letters=/[a-z]/;                            //must contain small letters (not capital)
       var capitalLetters=/[A-Z]/;                     //must contain capital lettes
       
       if(input.length < minlength) {
           pwOK = false;
           errorMessage += "\nMin. length must be at least " + minlength + " character.";
       }
       
       if(input.indexOf(document.getElementById("username").value) != -1) {
           pwOK = false;
           errorMessage += "\nThe password must NOT contain the username.";
       }
       
       if(input.search(startnum) != -1) {
           pwOK = false;
           errorMessage += "\nPassword must NOT start with a number.";
       }
       
       if(input.search(endnum) != -1) {
           pwOK = false;
           errorMessage += "\nPassword must NOT end with a number.";
       }
       
       if(input.search(specialChars) != -1) {
           pwOK = false;
           errorMessage += "\nPassword must NOT contain special chars.";
       }
       
       if(input.search(space) != -1) {
           pwOK = false;
           errorMessage += "\nPassword must NOT contain spaces.";
       }
       
       if(input.search(letters) == -1) {
           pwOK = false;
           errorMessage += "\nPassword must contain small and capital letters mixed.";
       }
       
       if(input.search(capitalLetters) == -1) {
           pwOK = false;
           errorMessage += "\nPassword must contain small and capital letters mixed.";
       }
       
       var numHits = input.match(numbers);
       if(numHits == null || numHits.length == null || numHits.length < 2) {
           pwOK = false;
           errorMessage += "\nPassword must contain at least two numbers.";
       }
       
       if(!pwOK) {
           alert(errorMessage);
       }
       
       return pwOK;
   }//end function
   
   </script>
   

   Put this srcipting block into your index.jsp between the <head></head> elements... I think we are ready to try whether it works properly.

Build and run the project

1. To build and run in the IDE first press Ctlr+F11 to Clean and Build. If it succeds the you can run your project with F6. These functions can be triggered from menu certainly. If your project runs the IDE built-in Tomcat rendering the index.jsp and you can see somethig like this:
   
   
   
   If you type text in input boxes, the xinput tags immediatly do checking and let you know whether your input is correct. If you re-parameterize tags' emptyAllowed attributes setting to true, you can get rid of bothering "back-to-cursor and type until its OK" side effect.
   In the picture below you can see an javascript checker alert that I received when tried to type a password not matching the security policy.