I recently was asked to put up a public facing Job Recruitment Form. This page will be integrated as a part of the existing company’s website. Since the current company website is hosted by IIS, ASP.NET Web Form would be the easiest solution.

Prevent Invalid Submission

To prevent garbage data being sent, data validation is required. On the server-side, we should use the ASP.NET Validations Controls to validate the data. On the client-side, we will also use JavaScript for data validation. The benefit of using client-side validation is instant validation. Users will immediately see the validation result upon pressing Submit button.

The weakness of client-side validation would be it can be rendered useless by disabling JavaScript in the browser’s. But this should not be a problem because we already have the server-side validation in place. Another considered weakness of client-side validation is the JavaScript itself. Writing JavaScript validations from scratch is tedious and boring 😀

Luckily, it is no longer a case. Enter validate.js!. It is now really easy to create client-side validations and integrate it with your ASP.NET Web Form. You just need to:

1. Include jQuery and validate.js

   <script type="text/javascript" 
   src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
   </script>
   <script type="text/javascript" src="validate.js">
   </script>
   

2. Add Validations Array.Just before the </html>, we need to insert JavaScript code. The code will declare an object from class FormValidator. FormValidator will take 3 parameters: form id, validation array, and event-handler to be invoked upon finishing validations.
   Below is the sample of FormValidator.

   var validator = new FormValidator('form1', //Form id
   	[ //Validation array
   		{
   			name : 'Name', //Input field id
   			rules : 'required' //Validation rules
   		}, {
   			name : 'Position',
   			rules : 'required'
   		}, {
   			name : 'Country',
   			rules : 'required'
   		}, {
   			name : 'Salary',
   			rules : 'required'
   		}, {
   			name : 'fileCover',
   			display : 'Cover Letter', //
   			rules : 'required'
   		}, {
   			name : 'fileCV',
   			display : 'CV',
   			rules : 'required'
   		}, {
   			name : 'Address',
   			rules : 'required'
   		}, {
   			name : 'Phone',
   			rules : 'required'
   		}, {
   			name : 'Email',
   			rules : 'required|valid_email' //two validation rules combined
   		}
   	], 
   	function (errors, event) {
   		if (errors.length > 0) {			
   			$(".error").empty(); //empty existing error
   			for (var i = 0; i < errors.length; i++) {
   				//Insert new error message
   				$("#" + errors[i].id)
   					.after("" + errors[i].message 
   					+ "");
   			}
   			
   			if (event && event.preventDefault) {
   				event.preventDefault();
   			} else if (event) {
   				event.returnValue = false;
   			}
   		} else {
   			event.returnValue = true;
   		}
   	}
   );
   

Prevent Automated Submission

In these days and age, internet is filled by humans and bots. There are all kind of bots that spamming forums and blog’s comments section. To make sure that the one submitting the Job Application Form is genuinely human, we could utilize ReCaptcha.

To my surprise, it is really easy to integrate ReCaptcha to your site. All you need to do is:

1. Register your site. Recaptcha will give you the public and private keys.
2. Add the ReCaptcha.dll to your bin folder.
3. Embed the code into your ASPX page.

    <recaptcha:RecaptchaControl
       ID="recaptcha"
       runat="server"
       PublicKey="your_public_key"
       PrivateKey="your_private_key"
       />
   

4. Add logic in the backend code.

   protected void Button1_Click(object sender, EventArgs e)
   {
       if (this.recaptcha.IsValid)
       {
           //... Do something when reCaptcha is correct
       }
       else
       {
           //... Do something when reCaptcha is WRONG
       }
   }
   

That’s it. Good luck with your project! Cheers!