A Sticky Form With Formatting and Input Validation

 

Introduction.  Since Wutka already has this example developed and I used it to learn more about sticky forms, I will present it here.  Basically, it is a sticky input form that will
  • gets some basic identification information from the user in textboxes
  • denote required fields
  • does some validation processing on the required inputs
  • directs the user back to the form with comments about how the  inputs need to be improved
  • refills the form each time with the most recent entries
  • displays the entries when filled in appropriately

You should call this JSP page name_formatter.jsp.

 

 

<html>
<head>
<title>A Sticky Form for Formatting Inputs</title>
</head>
<body bgcolor = "003344" text="cccccc">
<%
String first_name = request.getParameter("txt_first_name");
if (first_name == null) first_name = "";

String last_name = request.getParameter("txt_last_name");
if (last_name == null) last_name = "";

String address = request.getParameter("txt_address");
if (address == null) address = "";

String city = request.getParameter("txt_city");
if (city == null) city = "";

String state = request.getParameter("txt_state");
if (state == null) state = "";

String zip = request.getParameter("txt_zip");
if (zip == null) zip = "";

String formatOption = request.getParameter("sel_format_option");
if (formatOption == null) formatOption = "";

// since some fields are required
// set the default style for the required labels
String firstNameRequiredColor = "blue";
String lastNameRequiredColor = "blue";
String zipRequiredColor = "blue";
String requiredNotifyColor = "red";

// checking to see if this form has been submitted
if (request.getMethod( ).equals("POST"))
{

boolean allRequiredFieldsPresent = true;
// checking to see if required fields are present
if (first_name.length( ) == 0)
{

firstNameRequiredColor = requiredNotifyColor;
allRequiredFieldsPresent = false;

}
if (last_name.length( ) == 0)
{

lastNameRequiredColor = requiredNotifyColor;
allRequiredFieldsPresent = false;

}
if (zip.length( ) == 0)
{

zipRequiredColor = requiredNotifyColor;
allRequiredFieldsPresent = false;

}

// if all of the required fields haven't been entered
// inform the user
if (!allRequiredFieldsPresent)
{

out.println("You have not entered all of the required fields.<br>");
out.println("The fields you still must enter are marked in ");
out.println("<font color=red>" + requiredNotifyColor + "</font>");

}
else
{

// display the name and address that have been entered
String nameString = first_name + " " + last_name + "<br>" +
address + "<br>" +
city + ", " + state + " " + zip;
out.println("The current name is:<p>");

if (formatOption.equals("bold"))
{

out.println("<b>" + nameString + "</b>");

}
else if (formatOption.equals("italic"))
{

out.println("<i>" + nameString + "</i>");

}
else
{

out.println(nameString);

}
out.println("<p>");

}

}
%>
<form action="name_formatter.jsp" method = "POST">
<table>
<tr>
<td>First Name:
</td>
<td><input type="text" name="txt_first_name" value="<%=first_name%>">
</td>
<td><font color="<%=firstNameRequiredColor%>">required</font>
</td>
</tr>
<tr>
<td>Last Name:
</td>
<td><input type="text" name="txt_last_name" value="<%=last_name%>">
</td>
<td><font color="<%=lastNameRequiredColor%>">required</font>
</td>
</tr>
<tr>
<td>Address:
</td>
<td><input type="text" name="txt_address" value="<%=address%>">
</td>
<td>
</td>
</tr>
<tr>
<td>City:
</td>
<td><input type="text" name="txt_city" value="<%=city%>">
</td>
<td>
</td>
</tr>
<tr>
<td>State:
</td>
<td><input type="text" name="txt_state" value="<%=state%>">
</td>
<td>
</td>
</tr>
<tr>
<td>Zip Code:
</td>
<td><input type="text" name="txt_zip" value="<%=zip%>">
</td>
<td><font color="<%=zipRequiredColor%>">required</font>
</td>
</tr>
</table>
<P>
Format Options:<br>
<select name="sel_format_option">
<option value="normal">Normal</option>
<option value="bold">Bold</option>
<option value="italic">Italic</option>
</select>
</P>
<P>
<input type="submit" value="Format!">
</P>
</form>
</body>
</html>

 

After copying this code and uploading it and accessing it on your web you should see something like the following after entering the initial inputs and purposely leaving some required entries blank.

 

 

After pressing the Format! button you should see something like the following.

 

 

After filling in the remaining required entries you should see something like the following.

 

 

The code has a several aspects that need to be discussed.
  • we initialize a String variable to obtain the contents of each text box or set it to blank if we get a null value
  • in order to determine whether the form has been posted or this is its initial appearance we use the following

// checking to see if this form has been submitted
if (request.getMethod( ).equals("POST"))

  • we change the colors of the word required, next to the appropriate text boxes, based on the user's inputs

  • the value in each of the text boxes is filled in using a scriptlet expression with the
    <%=  %> delimiters

  • when everything is entered adequately the inputs are organized to display an address in postal letter form using the format options from the select box