Salesforce: Visualforce CommandButton to Bypass Validation/Required Fields

In Visualforce apex:CommandButton component, there is an attribute called “immediate” that allows us to invoke the controller action bypassing the validation rules associated with the fields (especially those that mark with required=”true”) in a visualforce page. I have been using this attribute alongside with the cancel button which does not required any input from users. Until recently, I noticed that the attribute no longer working as expected in one of my visualforce page development. For example:

<apex:page standardController="Account" extensions="AccountExt" standardStylesheets="true" applyBodyTag="false" docType="html-5.0" title="My Wizard">
	<apex:form id="theform" >
		<apex:pageBlockButtons >
			<apex:commandButton value="Cancel" action="{!cancel}" immediate="true"/>
			<apex:commandButton value="Search" action="{!doSearch}" />
		</apex:pageBlockButtons >
		<apex:pageBlockSection title="Test">
			<apex:inputfield value="{!account.Type__c}" required="true"/>

After some research, I realised this is actually related to the behavior in HTML 5 (doctType=”html-5.0″) where it will automatically validate all the required fields that I have in a form. So, how can we overcome this?

Option 1 (Form level)

You can set an HTML 5 attribute called html-novalidate=”novalidate” at the form level. However, this will disable the validation for all buttons. You should only use this if you have your own validation logic implementation in the controller/extension class.

<apex:form id="theform" html-novalidate="novalidate" >

Option 2 (Button level)

You can have the similar attribute next to the command button to disable the validation on the button specifically.

<apex:commandButton value="Cancel" action="{!cancel}" immediate="true" html-formnovalidate="formnovalidate" />

This is a better option to go for as we do not need to worry about implementing the additional logic to validate the user input.