The document discusses various challenges in web form design including managing user expectations, order of fields, and validation. It provides solutions such as progressive disclosure of fields, modal and modeless layers for help, and combining client-side and server-side validation. Common elements to focus on in form building include fieldsets, legends, and labels to group related form fields and properly associate labels.
14. Try this Password strength meter by Daren Mason Easy to change the validation that the users would see (function($){ $.fn.shortPass = 'Too short'; $.fn.badPass = 'Weak'; $.fn.goodPass = 'Good'; $.fn.strongPass = 'Strong'; $.fn.samePassword = 'Username and Password identical.â;$.fn.resultStyle = ""; The math is configurable //password has 3 numbers if (password.match(/(.*[0-9].*[0-9].*[0-9])/)){ score += 5;} http://plugins.jquery.com/project/pass_strength http://mypocket-technologies.com/jquery/password_strength/ http://edevil.wordpress.com/2005/11/14/javascript-libraries-roundup/ (good comprehensive list of JS libraries)
15. And this too Client-side validation <form method="get" class="cmxform" id="form1" action=""> <!-- The form section title --> <fieldset> <legend>Login Form</legend> <!-- The username --> <p> <label>Username</label> <input name="user" title="Please enter your username (at least 3 characters)" class="{required:true,minlength:3}" /> </p> <!-- The password --> <p> <label>Password</label> <input type="password" maxlength="12" name="password" title="Please enter your password, between 5 and 12 characters" class="{required:true,minlength:5}" /> </p> <!-- The inline error messaging --> <div class="error"> </div> <p> <input class="submit" type="submit" value="Login"/> </p> </fieldset> </form> http://plugins.jquery.com/project/validate http ://bassistance.de/jquery-plugins/jquery-plugin-validation/
![Contents ,[object Object],[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)