Introduction

When building web applications, it is important you take security seriously, especially when it has to do with collecting data from users. It is a common maxim in security to trust nobody, hence never trust the user to enter correct or valid form values. When it comes to validating form values, it can be done on the client-side (web browser) and on the server-side (using your preferred server-side language).Server-side validation is also crucial due to the fact that client-side validation can be completely bypassed by turning off JavaScript. Client-side validation is always in the sense of providing a better User Experience (UX), so the user doesn’t have to submit and reload a page simply because a value in a form isn’t valid – it makes things more dynamic. Validation should always be performed server-side – you can never trust client-side validation.

Client-side validation is a solution for highly interactive forms with on-the-fly field validation, but it will not prevent an ill-intentioned user from injecting and posting invalid formatted data to the server. It is important that your server-side script validates everything the user is doing, otherwise you will expose your site to SQL injection attacks, XSS attacks, users doing stuff they are not supposed to etc. Another things is that enter reCAPTCHA, a service that protects your website from unwelcome spam. Google’s reCAPTCHA explanation sums it up best; “reCAPTCHA uses an advanced risk analysis engine and adaptive CAPTCHAs to keep automated software from engaging in abusive activities on your site.

Background

Previously I was done the client side live form validation using HTML5-CSS3 and JavaScript. Also I was done the server side form validation using PHP. Recently I have worked with a Business Registration form validation that has both client and server side form validation with google reCaptcha integration. Now I want to share with my experience with you about this Business Registration Form. So let’s get started,

HTML5-CSS3 Live Validation

One of the features of HTML5 is the ability to validate most user data without relying on scripts. This is done using validation attributes on form elements.
If you want to specify the maximum character for the input field then you can use maxlength attribute. The maxlength attribute specifies the maximum number of characters allowed in the ”input” tag element.

If an element requires a value before the submission of the form, you can mark the element using the required attribute. When this attribute is true, the field is not allowed to be empty.

All “input” elements can be validated using the pattern attribute. This attribute expects a case sensitive Regular Expression as its value. If the element’s value is not empty and doesn’t match the regular expression specified by the pattern attribute, the element is considered invalid.
Following is the example for “Business Owner name” “input’ field, which I have use the pattern, maxlength and required attribute.

According to the CSS3 Form validation, an element will be invalid for the following two things occur:

  • The element matches the :invalid CSS pseudo-class; this will let you apply a specific style to invalid elements. Similarly, valid elements match the :valid pseudo-class.
  • If the user tries to send the data, the browser will block the form and display an error message.

So here I have displayed a ‘red asterisk’ image right side of the input field. When input field is focus and input data is invalid then ‘red asterisk’ will be changed by another invalid image. If the input data of the input field is valid then a green tick mark image will be shown in the right side of the input field.

Business owner name validation

JavaScript Client Side Validation

For the Client Side Form validation using JavaScript provides a way to validate form’s data on the client’s computer before sending it to the web server. Here already I have attached HTML5-CSS3 validation for the client side, that’s why I have never used same validation for the client side using JavaScript. For some elements I have attached some client side functionality using the JavaScript, like password strength checker, web url validation, uploaded Image validation and social media link validation.

Password

Here, I have check the progress strength text and progress bar when user enter the password character one by one in the password input box. On each keypress in the input box a value is calculate with the previous character value to calculate the strength. According to the value of strength the password strength progress bar is increases and strength type text is shown beside of its, that is categories by the weak, good, very good, strong.

Client side password strength check

The code segment to calculate the password strength progress bar and text is as following,

Company Logo

To upload a company logo, you much be ensure that you has an company logo by selecting ‘yes’ radio button or else choose file button is disabled. To check the uploaded company logo, the JavaScript code segment will be checked that is it valid image file like (jpg, jpeg, png, gif) or not. And other way it will be checked that its file size is not exceed maxfile size.

Upload company logo validation

Following is the code segment that is checked the uploaded company logo validation process,

Restaurant Delivery & Collection

Following all of the fields are associated in a group. “Time Required” for “Have Collection Option” input field will be enable if you checked the “Collection” checkbox or else the input field will be disable. Same rule is allow for the “Time Required” for “Have Delivery Option”. And “Minimum values” input field only enabled when you checked the “Collection” and/or “Delivery” checkbox is checked. Each input fields only allowed numeric values.

Restaurant delivery and collection fields

Following is the code segment for “Time Required” input field is enable when “Collection” check box is checked,

Following is the code segment for “Time Required” input field is enable when “Delivery” check box is checked,

Following is the code segment to enable the “Minimum values” input field when you checked the “Collection” and/or “Delivery” check box.

Following is the code segment that is only return numeric values for the input field,

Social Media Link

To check the social media link here I have apply a custom rule using JavaScript. When user input the URL in the input box like “Facebook” then my custom rule will check that is the string is contains “facebook.com” or not. If the URL string is contains “facebook.com” then it is valid or else it is invalid.

Social Media input field

Following is the code segment to check the Facebook URL and this function will be trigger when you press an character to write url string,

Facebook field live validation

In the 2nd part, I will discuss the server side validation for this business registration form with Google reCaptch integration. So check out the Part-2 for this project. Hope you will enjoy it…:)

LEAVE A REPLY