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 class="w20 right">
        <h4><apex:inputField value="{!case.Status}" styleclass="input-disabled"/></h4>
      <div class="w40">
        <h4>Account Name</h4>
        <br />
        <h4><apex:inputField value="{!case.AccountId}" styleclass="input-disabled w50"/></h4>

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

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

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.


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>

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

Leave a Comment