{Dynamics CRM web resource} Exploring field validation features in HTML5.

In this topic, I am going to walkthrough the cool HTML5 stuffs that you can use for field validation while you build webresources in Dynamics CRM.

Up until now, if you are not using HTML5, to validate a required field, you would need to write javascript to test for each field. Also your headache increases when the field needs to be made required based on some business logic.

But now with HTML5. All you need to do is set the required attribute for the field.

<input type="text" name="testfield1" required>

When you insert the field on the form and try to submit the form without any entering any data, you would get a validation from the browser like this.

Off-course you can change the ugly red border it is showing with a simple css style like the one below.

input:invalid {
  border: solid 1px #eee

}

Any required field when not entered, the browser will treat with this field as invalid. This is another feature of HTML5. You can put any css you want for this. 

So we have used the HTML5 feature to validate if the user does not input any data. Now how do you validate a pattern for input. For example – an email field would be required as well as it should have a valid format. Don’t be upset here. HTML5 has covered you up in this also.

We have the pattern attribute here. The pattern attribute accepts a regular expression.

Let us take an example here.

<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />

Once you put the field on the form, and try to submit the form without entering the email it should throw up validation from the browser.

Cool isn’t it? All this without any line of code.

Next time somebody asks you to develop a webresource, implement this and wow everyone.

Hope this helps!