WARNING: This tutorial is being written! Do not hesitate to report any errors or suggestions.
Quick access: The client-side validation VS the server-side validation Implementation of a Web page with a form validation Shut off the validation of a form The different validation tags proposed by NWS
Your Web application will certainly require that you develop forms of seizure. To ensure the cohesion of the data putted into play by your application, it will be necessary to verify the entered data of the different users, and this before to treat them and why not, to store them in database.
The Web technologies allow to place two types of validation code: an executed code on the client post (certainly in Javascript) and some code that will have to be executed on the HTTP server. What kind of validation should we have to prefer: on the client side or on the server side? In reality, the correct answer is: on the two sides!
The client side validation is important: it allows to avoid some useless HTTP come and go on the network. For example, if a field necessary should have to be completed, it is a pity that the form is effectively sent to the server, knowing that this server will deny your request and tell you to seize the missing elements of the considered form.
From another point of view, to only consider the verification on the client side would be a serious mistake on your part. Indeed, the user of the browser may ask him to turn off the scripts (including Javascript) with a few clicks of the mouse. A validation on the server side is clearly required if you want to guarantee the consistency of the submitted datas . Another example, if you need to validate a date from the current date, you have to know that the client could change its configuration, and thus, make believe at your form that the date is correct. Again, it is necessary that the server ensures the consistency of the information.
So, at worst, you only give a validation on the server side. At best, you validate in part your form on the client side, but also a second time on the server side. However, it is clear that, in fact, this dual validation increases the quantity of code to be developed. Again, the NWS framework will simplify the forms' implementation and the validation checks associated with them. Indeed, NWS provides a number of web component of validation ready to use. Of course, these components validate the information on the server side, but also generate all the javascript code required for a client side validation (provided, of course, that the browser supports the execution of the client scripts).
The NWS main components of validation are: <web:RequiredValidator>, <web:SameValidator> and <web:RegularExpressionValidator>: we will resume, one by one, later in this document. As always, the explanations that follow will be based on the demonstration application of the NWS Framework.
<web:RequiredValidator>
<web:SameValidator>
<web:RegularExpressionValidator>
If you want to do something simple, only the web page has to be edited to connect to itself some components of validation. In most cases more complex, you might need to recover the components of validation at the level of the page class, but we will eliminate this possibility in this chapter. A component of validation is a Visual component (corelib.services.web.components.VisualComponent): in fact, if the component of entry with this one it is assiociated is not properly set, the component of validation will produce an error message. It is therefore necessary to put in association the validation component to the entry component with this one it is associated: to do so you have to use the property componentToValidate. The next page proposes the integration of components of validation on an entry form of login and password.
01 <?xml version="1.0" encoding="ISO-8859-1" ?> 02 <web:Html xmlns:web="corelib.services.web.components" 03 codeBehind="corelib.services.web.samples.virtualcaddy.webpages.Login"> 04 <head> 05 <title>Logon screen</title> 06 <link rel="stylesheet" type="text/css" href="CssStyles.css" /> 07 </head> 08 <body> 09 <h1>Logon screen</h1> <br /> 10 11 <web:Form focus="txtLogin" method="post"> 12 <div align="center"> 13 Login : 14 <web:TextBox id="txtLogin" value="Malone" /> 15 <web:RequiredValidator componentToValidate="txtLogin" 16 errorMessage="Value is required" cssClass="Validator" /> 17 <br/> 18 19 Password : 20 <web:TextBox id="txtPassword" value="P@ssw0rd" type="password" /> 21 <web:RequiredValidator componentToValidate="txtPassword" 22 errorMessage="Value is required" cssClass="Validator" /> 23 <br /> <br/> 24 25 <web:Button id="btnConnect" value="Connect" /> <br /> 26 <web:OutputText id="lblResult" /> <hr /> 27 28 <div id="divTime" runAt="server"></div> 29 </div> 30 </web:Form> 31 </body> 32 </web:Html>
You can also notice the presence of the attributes errorMessage and cssClass. The first allows you to define an error message to produce if there is a not entry of the associated component: this message can be internationalized (we will come back later - you can also visit the page LoginI18N.wp of the demonstration application, for more informations). The second allows to apply a class of CSS styles on the error message producted. For more informations on the use of CSS, I refer you to our CSS tutorial.
WARNING: if you want that the validation also works on the client side, it is imperative to use the tag <web:Form> (as it is done on line 11 of the above example). The use of the HTML tag <form> will not start the validation on the client side.
In some cases, it may be useful to define a button of a form submission, but that does not start any validation of the form. For example, a button of cancellation may be associated with an event manager to realize a possible change of direction: in this case, it would be a shame to impose a correct entry of the form. To get such a button, it is simply required to add an attribute immediate="true" to your form button.
01 <web:Button id="btnCancel" value="Annuler" immediate="true" />
To close this chapter, i propose a small example showing the use of the three components of NWS validation. This form asks you to necessarily take a login, which should be an email address syntactic well formed, and also a password (it will be not available). This password should be entered a second time to confirm it.
For the entry of the login, we use a component of type <web:RegularExpressionValidator>. This one requires the presence of the attribute regularExpression: it indicates the regular expression to use for the validation. For more informations on the implementation of a regular expression in Java, I refer you to the site of Sun. You can note, however, that the character . represents any character and the character + allows you to repeat the previous item at least one time.
To prescribe an entry for the password, a component of type <web:RequiredValidator> is used. Finally, to confirm the entry, a validation component of type <SameValidator> is used. This latter type of component accepts, in addition to the attribute componentToValidate, an other attribute masterComponent. If the entry texts in the two web components are not equal, the error message is produced.
01 <?xml version="1.0" encoding="ISO-8859-1" ?> 02 <web:Html xmlns:web="corelib.services.web.components" 03 xmlns:demo="corelib.services.web.samples.virtualcaddy.webcomponents" 04 codeBehind="corelib.services.web.server.WebPage"> 05 <head> 06 <title>Validator Sample</title> 07 <link rel="stylesheet" type="text/css" href="CssStyles.css" /> 08 <style> 09 .ValidatorError { 10 color: red; 11 } 12 </style> 13 </head> 14 <body> 15 <h1>Validator Sample</h1> <br /> 16 17 <web:Form method="post"> 18 <table style="width: 340" > 19 <tr> 20 <td class="Text" width="50%">Login (email):</td> 21 <td> 22 <web:TextBox id="txtLogin" cssStyle="width: 100%" /> 23 </td> 24 </tr> 25 <tr> 26 <td colspan="2" align="right" class="Text"> 27 <web:RegularExpressionValidator componentToValidate="txtLogin" 28 regularExpression=".+@.+\..+" 29 errorMessage="Please, insert your email" 30 cssClass="ValidatorError" /> 31 </td> 32 </tr> 33 <tr> 34 <td class="Text">Password:</td> 35 <td class="Text"> 36 <web:TextBox id="txtPassword1" type="password" cssStyle="width: 100%" /> 37 </td> 38 </tr> 39 <tr> 40 <td colspan="2" align="right" class="Text"> 41 <web:RequiredValidator componentToValidate="txtPassword1" 42 errorMessage="Please, insert your password" 43 cssClass="ValidatorError" /> 44 </td> 45 </tr> 46 <tr> 47 <td class="Text">Confirm password:</td> 48 <td class="Text"> 49 <web:TextBox id="txtPassword2" type="password" cssStyle="width: 100%" /> 50 </td> 51 </tr> 52 <tr> 53 <td colspan="2" align="right" class="Text"> 54 <web:SameValidator 55 componentToValidate="txtPassword2" masterComponent="txtPassword1" 56 errorMessage="Please, confirm your password" 57 cssClass="ValidatorError" /> 58 </td> 59 </tr> 60 <tr> 61 <td colspan="2"> </td> 62 </tr> 63 <tr> 64 <td colspan="2" align="center"> 65 <web:Button id="btnCreate" value="Confirmer" /> 66 <web:Button id="btnCancel" value="Annuler" immediate="true" /> 67 </td> 68 </tr> 69 <tr> 70 <td colspan="2"> </td> 71 </tr> 72 </table> 73 </web:Form> 74 75 </body> 76 </web:Html>
Dominique LIARD - © 2007 SARL Infini Software - All rights reserved Other brands and product names in these documents are the property of their respective owners.