How to add a required field validator in SharePoint 2013 Application Pages using HTML5

Hi All,

I was developing a custom application page in SharePoint 2013, while adding all my controls in the custom application page i wanted to add a required field validator to a textbox control.

As a .NET developer, you will find the normal action is to add a required field validator to your page, which basically works, but in this post i want to show you that you can easily incorporate HTML5 validation attributes in SharePoint 2013 pages!!

In HTML5, you can add an attribute called required to any control, which tells the browser that this control is a required control.

<%@ Register TagPrefix="spuc" Namespace="Microsoft.SharePoint.WebControls"
             Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<spuc:InputFormTextBox ID="txtName" runat="server" class="ms-input"
      Title="Full Name" TextMode="SingleLine" Columns="40" required />


Adding a required attribute to your markup control will flag this control as a required control in your SharePoint page.

You can apply any other HTML5 validation attribute and it will render correctly in any SharePoint Page with no additional setup.

Here is a cool blog about how to apply HTML5 validation types into input control:
http://www.the-art-of-web.com/html/html5-form-validation/
 

Enjoy!



--ME

Study Material Notes for Programming HTML5 and CSS 3 Microsoft Exam

Hi Folks,

I got a free voucher from Microsoft for programming HTML 5 and CSS 3 Exam. I studied and reviewed online video materials and i want to share with you my study notes and hope this will be helpful for passing the exam. Congratulations in advance for everyone!.

My Notes:

1. Use accepts:'application/bin,text/xml' to accepts only XML and binary content in HTML responses.
2. Use the following condition to check if the html response content is binary: If(request.getResponseHeader("Content-Type")=="application/bint"
3. To show the status of upload is displayed in the progress bar:Xhr.upload.onprogress=
4. To support 2 way communication between a web page and a worker role, implement the following:
1. From the main page, use onmessage event handler of the web worker to capture events.
2. From the web worker, use the onmessage event handler of the main page to capture events.
5. Standard-complaint screen readers must be able to identify the links contained within the navigation structure automatically: Use
   semantic markup.
6. Use appendChild to add a control in DOM document.
7. To extend a class with a method you should use prototype keyword as follows: Customer.prototype.GetCommission() = funct() {…}
8. If you want an input control to allow only numeric values, use the following:    type="number"
9. To pass objects between web page and web worker you can use: JSON,String and JavaScript types.
10. To register an event listener for the web worker use addEventListenr and to stop a web worker use: self.close();
11. Anchor selector order:  a:link --> a:visted --> a:hover --> a:active
12. Use Figure semantic markup to include image and its caption using figcaption markup.
13. To store user's information you can use: localStorage to get or set  user's data.
14. To write a code to throw an error: throw new Error("Invalid",200)
15. To show @ in the email address for a submitted form,   Use: str=$("form").serialize() ;         str=decodeUriComeponent(str);
16. Apply styles from highest to lowest priority: 
1. User agent style sheets
2. Author normal style sheets
3. Author important style hseets
4. User normal style sheets
5. User important style sheets
17. To make sure that the advertisement section on the right most of the page use:
    markup.
18. To handle automatically each time the request status change use xhr.onreadstatechange
19. Catch specific error number by using e.number and not e.message
20. To use text-transform in CSS, you should use captalize  semantic tag.
21. You need to group page content together to maximize search engine readability use article semantic markup.
22. When  you want the inner paragraph exactly far from the outer paragraph, then you should use Relative.
23. To show JSON confirmation number in a label: $("#txtValue").text(JSONObject.Confirmation);
24. To show text around an image is showing in the center of the page use: -ms-wrap-side: both
25. Use header to apply css or classes to different heading markup such as: H1,H2

**Videos - Jump start from Microsoft Virtual academy:

https://www.microsoftvirtualacademy.com/tracks/developing-html5-apps-jump-start

Good Luck, Feel free to drop a line with any feedback you would like to add.