Error Output With Scriptaculous
In this tutorial we are going to write some simple code to display error output to the user. Here we will be using the Prototype.js framework, Scriptaculous library, HTML, and CSS. If you have not yet done so, head here to learn how to install Scriptaculous.
If you've ever done any work with DHTML or JavaScript manipulation of the DOM, you are well aware that how we set up our HTML markup is crucial to the success of our effect. The Prototype framework relies heavily on the use of "id" tags throughout your markup.
<code><div id="error_output">Error!</div></code>
It is important to keep in mind that you need to keep unique "id"s on your HTML elements for two reasons– HTML validation and uniquely accessible to JavaScript.
<div id="error_output1">You forgot to enter your email!</div>
<div id="error_output2">You forgot to enter your password!</div>By distinguishing between these two elements, we can access them individual through Scriptaculous.
To create our nifty little error output effect, we are first going to setup a mock login HTML form for user input.
<form method="post">
<fieldset>
<label for="email">Email: </label>
<input type="text" size="30" id="email" />
</fieldset>
<fieldset>
<label for="password">Password: </label>
<input type="text" size="30" id="password" />
</fieldset>
<fieldset>
<input type="submit" value="Login" />
</fieldset>
</form>
To keep things simple and focus on Scriptaculos for the present time we are going to add a JavaScript action onto the <form> tag. Change the beginning of your form to:
<form method="post" action="javascript:checkFields()">
Now for the JavaScript. I am going to add this right before the <form> in the body to keep things simple for now (usually you want to keep your JavaScript code blocks in your <HEAD> tags)
<script language="javascript" type="text/javascript">
function checkFields()
{
if($F('email').length == 0)
{
Effect.Appear('error_output1');
}
if($F('password').length == 0)
{
Effect.Appear('error_output2');
}
}
</script>
What's going on in this script? Well basically, we are validating the form fields to make sure that the user has entered some input. Note the use of $F('email'). This uses a Prototype function of $F (spoken 'dollar-eff') to point to the entered value of the form element with an id of "email". In traditional HTML forms you identify fields with the "name" attribute, however in this instance we are using solely JavaScript so we replace that with "id". Two boolean statements were set up to check the length of the user inputted information. If the length of the string the user entered is zero, we are going to display error output utilizing the Scriptaculous function Effect.Appear(). The argument passed to this function indicates which element we are animating.
Hopefully you haven't tried this yet because we aren't quite where we need to be for it all to work. We need to prep our HTML file a little more for it all to work. In order to make our elements appear, we first have to hide them. The best method to do this is to just define a CSS style directly in the <div> tag. Most users will want to (out of code coding ettiquette) include this CSS in an external file but we need it to be part of the flow of the document, which will not take place if we define our display property externally.
So now our error output info will look like this:
<div id="error_output1" style="display:none">You forgot to enter your email!</div>
<div id="error_output2" style="display:none">You forgot to enter your password!</div>
There we have it, so now let's put it all together.
<script language="javascript" type="text/javascript">
function checkFields()
{
if($F('email').length == 0)
{
Effect.Appear('error_output1');
}
if($F('password').length == 0)
{
Effect.Appear('error_output2');
}
}
</script>
<div id="error_output1" style="display:none">You forgot to enter your email!</div>
<div id="error_output2" style="display:none">You forgot to enter your password!</div>
<form method="post" action="javascript:checkFields()">
<fieldset>
<label for="email">Email: </label>
<input type="text" size="30" id="email" />
</fieldset>
<fieldset>
<label for="password">Password: </label>
<input type="text" size="30" id="password" />
</fieldset>
<fieldset>
<input type="submit" value="Login" />
</fieldset>
</form>
With a little CSS fun you can make it look pretty slick. View Example!
Stay tuned because we will definitely be expanding on this tutorial in the future!
