Required fields do not allow cancel

Question

I have a custom VF page that I am using as a custom cases page, standardController="case". I have an apex:form with a few apex:inputField to create the boxes. Inside the form I have a save and cancel button.

<apex:commandButton value="Submit" action="{!Save}" />
<apex:commandButton value="Cancel" action="{!Cancel}" immediate="true" />

The problem is if I include required="true" on the inputFields I am not able cancel the submission until I have put something into the fields marked with required. The flip side is without the fields being marked as required I am able to submit the form with nothing filled out.

  <apex:form >
  <h1 class="FBlue">Case Edit</h1>
  <section class="whiteBox">
    <div class="bottomFive">
      <div class="w40 left bottomFive">
        <h4>Created by</h4>
        <br />
        <h4><apex:inputField value="{!case.Name__c}" styleclass="input-disabled w50"/></h4>
      </div>
      <div class="w20 right">
        <h4>Status</h4>
        <h4><apex:inputField value="{!case.Status}" styleclass="input-disabled"/></h4>
      </div>
      <div class="w40">
        <h4>Account Name</h4>
        <br />
        <h4><apex:inputField value="{!case.AccountId}" styleclass="input-disabled w50"/></h4>
      </div>
    </div>

      <section class="bottomFive topFive">
        <div class="TableTitle">
          <h4>Case Description</h4>
        </div>
        <br />
        <div class="w50 inlineBlock bottomFive ">
          <div class="w40 left">
            <h4>I need assistance with</h4><span class="required">*</span>
            <br /><apex:inputField value="{!case.I_need_assistance_with__c}" required="true"/>
          </div>
          <div class="w40 rFloat">
            <h4>Topic</h4><span class="required">*</span>
            <br /><apex:inputField value="{!case.Topic__c}" required="true"/>
          </div>
        </div>
        <br />
        <div class="w70">
          <h4>Subject</h4><span class="required">*</span>
          <br /><apex:inputField styleclass="bottomFive w100" value="{!case.subject}"/>
        </div>
        <br />
        <div class="FTop w100">
          <h4>Description</h4><span class="required">*</span>
          <br /><apex:inputField styleclass="w70" value="{!case.Description}"/>
        </div>
        <br />
        <div class="w20">
          <h4>Severity</h4><span class="required">*</span>
          <br /><apex:inputField value="{!case.Severity__c}" />
        </div>
        <p>If your request does not meet the Severity criteria as defined above, Support may re-classify it as appropriate.</p>
        <br />
      </section>

    <div class="FCenter">    
      <apex:commandButton value="Submit" action="{!Save}" styleclass="btn-white"/>
      <apex:commandButton value="Cancel" action="{!Cancel}" immediate="true" styleClass="btn-white btnspace"/>
    </div>   
  </section>
  </apex:form>

How can I have required fields and still have a cancel button?

EDIT: The page does work and we are not having any issues the fields. Strictly the cancel button is not working.

Answer 1

If you are setting your doctype to HTML5 and having a validation error on cancel, I would recommend that you pass through the html "novalidate" parameter (assuming in normal save, all of your validation would be done via Apex and not the HTML 5 validation. Should work like this:

<apex:form html-novalidate>

Answer 2

Using above solution i.e. "apex:form html-novalidate" will disable all validations for all command buttons including buttons like "Save". It would be best to disable validations only on press of CANCEL button, which could be achieved in an isolated way on CANCEL button only i.e.

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

This only disables validation on CANCEL button press and they work on rest of the buttons. Read more about it in my recent blog post for the same : http://www.tgerm.com/2014/06/cancel-out-of-html5-browser-based-validations-novalidate.html

Answer 3

To add to the knowledge above, there is also a known issue with HTML-5 and commandbuttons which use "immediate=true":

https://success.salesforce.com/issues_view?id=a1p300000008YvNAAU

Even with immediate=true and a properly used action region, the page might still validate the required fields (even if they are outside the action region) and therefore fail to complete the action.

The workaround is to use an actionfunction to call the required server action. Take the action attribute off the command button and add an onclick="ActionFunctionName();return false;" to the command button.

Answer 4

try this in case action is not standard controller {!cancel} action:

<apex:commandButton oncomplete="javascript:window.open('/{!$CurrentPage.parameters.#}', '_parent');" value="Cancel" immediate="true" />