Required fields do not allow cancel

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

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>

Attribution
Source : Link , Question Author : Grady D , Answer Author : JimRae

Leave a Comment