Visualforce - Using Javascript for mandatory fields - salesforce

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
<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
<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>

Answer 1

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?