Visualforce - Using Javascript for mandatory fields

Question

Team,

I am working on a Salesforce Visualforce page using Javascript to validate mandatory fields - both picklist and text fields. I tried using html required = true 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.

<script>
	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();
		}
	}
</script>

<apex:form id="PRDetails"> 
	<table width="100%">
		<tr>
			<td width="50%">
				3. Review of documentation &nbsp;
					<b> <apex:outputText value="{!PR['Review__c']}" rendered="{!PR['Status__c']='Complete'}"/> </b>
						<apex:inputField value="{!PR['Review__c']}" rendered="{!PR['Status__c']!='Complete'}" id="RevPL" />
				
			</td>
		</tr> 
	</table>
	
	<br/>  
	
	<table width="100%">
		<tr>
			<td width="50%">4. Status &nbsp;
				<b> <apex:outputText value="{!PR['Status__c']}" rendered="{!PR['Status__c']='Complete'}"                                      /></b>
					<apex:inputField value="{!PR['Status__c']}" rendered="{!PR['Status__c']!='Complete'}" id="StatusPL" />
			</td>
		</tr>
		<tr>
			<td class="padding">Notes:</td> 
		</tr>
		<tr>
			<td class="padding">
				<b> <apex:outputText value="{!PR['Notes__c']}" rendered="{!PR['Status__c']='Complete'}"/> </b>
					<apex:inputField styleClass="inputLTextbox" value="{!PR['Notes__c']}" rendered="{!PR['Status__c']!='Complete'}" id="Notes"/>
			</td>
		</tr>
	</table>
	
	<table align="center">
        <tr>
            <td>
                <apex:repeat value="{!PR}" var="PR">
                    <apex:commandButton value="Submit" style="background: #1895c1; color: #FFFFFF; width: 150px;" onclick="submitOnClick(this);" rendered="{!PR['Status__c'] !='Complete'}"/> 
                </apex:repeat>
                <apex:actionFunction name="doSubmit" action="{!submitPR}" /> 
            </td>
        </tr>
    </table>
	
    <table width="100%">
        <tr>
            <td style="text-align:right;"><apex:commandLink action="{!savePR}" value="Save" id="SaveLink" style="text-decoration:none; color:blue;"/></td>
        </tr>
    </table>
</form>

Jo_gurt Jo_gurt · Accepted Answer · 2018-09-23T19:37:23

1) You've got

var StatusPL

Declated twice.

2) Visualforce generates IDs in it's own way (adds hierarchy to it) - your "getElementById" won't work, you need to do something else - do an inspect on your page in browser. Maybe add classes and use getElementByClass instead?

Visualforce - Using Javascript for mandatory fields

1 Answers