HTML & CSS Direct Study

Web Form Validation

Validation is crucial important in having any sort of data base or reporting system. If the information that is entered by users is not correct or invalid in any way then you recieve data that in unhelpful and can cloud real data within your system. There are several ways that you can validate data:

• Server-side validation: This method of validation is done on the server side (hosting side). Advantages to using server side validation is that it can be very secure and works even in browsers were JavaScript is disabled (some people that are trying to insert false information or trying to do malicious things will turn this off to bypass validation). On the other hand disadvantages can be that response times can be slow and feedback can only be given after the user has submitted the information.
  
• Client-side validation: Client side validation helps to brighten the disadvantages of server side. All validation is done in real time while the user is entered information. The user will never be able to submit the information if the validation fails, however on the down side users can turn on the JavaScript that the client side validation runs of off and completely bypass that validation.

Both methods have advantages and disadvantages. The best way to achieve validation is to use them both. This provides a better user experience with less complications with validations while also keeping out those who are bypassing the system.


Why and What information should be validated?

• required: This is any information that is crucial to the transaction between you and the user. Without this information the operation cannot be completed. When making forms it is important to think of a few things. 1) Mark any mandatory field (commonly marked with (*), however this should be noted on the form). 2) Minimize any fields that are not mandatory, with limited distractions users are more likely to fill out the form. 3) If all fields are mandatory do not mark them all 4) It is common practice to have no more than 5 mandatory fields for a good form.
  
• correct format: As discussed in an earlier blog format is as important as correct data. Fields such as emails, URLS, phone numbers, birthdays, and other fields all have specific formats. It is best to just let the user enter the data in the way they chose and have the application correctly asses the data, or like suggested earlier have the computer do the formatting while they are typing it in.
  
• Confirmation Fields: This is so that the user knows they are entering in the correct information. This field is commonly used for passwords, email address, or other important information. Confirmation fields should be located below or next to the original field and clearly have a label that states "Confirm you .... ". Provide the user with feedback if the two fields do not match.
  
• Validation Feedback: If the information that was entered is incorrect you need to inform the user in a bold way. Tips for Validation Feedback: 1) The error message should be at the top of the web page so that it is noticeable. 2) The error message should be in red and display an icon that is commonly known as having errors 3) Fields in the form need to be highlighted in red (backgrounds, in-lines, or field labels) 4) Provide feedback with why the information is incorrect ( giving initial hints can eliminate validation feedback in the long run)
  
• Validation upon Submit: This is done after the user hit the submit button at the end of the form. The advantages to this is the user is not interrupted while filling out the form, however it can become frustrating to have to return to the form to correct it. (Server-side validation)
  
• Real-Time Validation (instant): This is when validation is done in real time while the user is entering information. This can be achieved through use of JavaScript and can help users fill out the data as they go along. When using this validation, use it sparingly because it can become distracting if overused.
  
• Help hint: Give the users hints with what each field is asking for. This will eliminate feedback errors and help users to enter the data on the first try. You can do this by having text next to the fields or you can use Help Indicators. These indicators can be used to scroll over and display a description of what the field is looking for.
  
• Dynamic Tips: These tips only appear when the user is entering data in to a particular field. This helps to reduce clutter and focus on the information that is being provided. By placing these tip to the right side of the field they can be helpful and non-distracting.
  
• Masking Input: This can help users enter in information in a particular format. Users are forced to use this format because of the mask that is set. This should be used with caution, in the end it is best to let the user enter various input format and have the application format the data.
  

Useful Validation Site:

These sites are useful for different types of validations on web pages. Remember to use them correctly and in a helpful way.

Live Validation
Valdanguage
JavaScript Form Validation
Form field Hint with CSS and JavaScript
Dynamic JavaScript Form Validation