title: Visualforce - Using Javascript for mandatory fields
body: <p>Team,</p>
  
  <p>I am working on a Salesforce Visualforce page using Javascript to validate mandatory fields - both picklist and text fields. I tried using html <em>required = true</em> but that won't work because I have two functionalities - save link and submit button - on my visualforce page. I would like the user to get an error if they try to submit and the required fields are null/blank. Below is my code but it's not working. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
   function submitOnClick(objSubmitBtn){
    var RevPL = document.getElementById('RevPL').value;
    if(RevPL == null || RevPL == ''){
     alert('Review needed.')
     return false;
    }
  
    var StatusPL = document.getElementById('StatusPL').value;
    if(StatusPL == null || AdhStatusPL == ''){
     alert('Status needed.')
    }
    
    var StatusPL = document.getElementById('Notes').value;
    if(StatusPL == null || AdhStatusPL == ''){
     alert('Please add notes.')
    }
  
    if(confirm('Are you sure you want to submit?')){
     objSubmitBtn.disabled = true;
     objSubmitBtn.value = 'Submitting... Please Wait';
     doSubmit();
    }
   }
  &lt;/script&gt;
  
  &lt;apex:form id="PRDetails"&gt; 
   &lt;table width="100%"&gt;
    &lt;tr&gt;
     &lt;td width="50%"&gt;
      3. Review of documentation &amp;nbsp;
       &lt;b&gt; &lt;apex:outputText value="{!PR['Review__c']}" rendered="{!PR['Status__c']='Complete'}"/&gt; &lt;/b&gt;
        &lt;apex:inputField value="{!PR['Review__c']}" rendered="{!PR['Status__c']!='Complete'}" id="RevPL" /&gt;
      
     &lt;/td&gt;
    &lt;/tr&gt; 
   &lt;/table&gt;
   
   &lt;br/&gt;  
   
   &lt;table width="100%"&gt;
    &lt;tr&gt;
     &lt;td width="50%"&gt;4. Status &amp;nbsp;
      &lt;b&gt; &lt;apex:outputText value="{!PR['Status__c']}" rendered="{!PR['Status__c']='Complete'}"                                      /&gt;&lt;/b&gt;
       &lt;apex:inputField value="{!PR['Status__c']}" rendered="{!PR['Status__c']!='Complete'}" id="StatusPL" /&gt;
     &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
     &lt;td class="padding"&gt;Notes:&lt;/td&gt; 
    &lt;/tr&gt;
    &lt;tr&gt;
     &lt;td class="padding"&gt;
      &lt;b&gt; &lt;apex:outputText value="{!PR['Notes__c']}" rendered="{!PR['Status__c']='Complete'}"/&gt; &lt;/b&gt;
       &lt;apex:inputField styleClass="inputLTextbox" value="{!PR['Notes__c']}" rendered="{!PR['Status__c']!='Complete'}" id="Notes"/&gt;
     &lt;/td&gt;
    &lt;/tr&gt;
   &lt;/table&gt;
   
   &lt;table align="center"&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;apex:repeat value="{!PR}" var="PR"&gt;
                      &lt;apex:commandButton value="Submit" style="background: #1895c1; color: #FFFFFF; width: 150px;" onclick="submitOnClick(this);" rendered="{!PR['Status__c'] !='Complete'}"/&gt; 
                  &lt;/apex:repeat&gt;
                  &lt;apex:actionFunction name="doSubmit" action="{!submitPR}" /&gt; 
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
   
      &lt;table width="100%"&gt;
          &lt;tr&gt;
              &lt;td style="text-align:right;"&gt;&lt;apex:commandLink action="{!savePR}" value="Save" id="SaveLink" style="text-decoration:none; color:blue;"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/form&gt; </code></pre>
  </div>
  </div>
  </p>