How to use Javascript to validate required field entry on a VF page

Question

I cannot and don't want to use required attribute because it is giving me so many rerendering issues as my page has so many dynamic fields based on different conditions, I am attaching the sample code.

<apex:pageMessages/>
<apex:messages/>  
           <apex:pageBlock id= "pBlock">
             <apex:pageBlockSection>
            <apex:pageBlockSectionItem>
                    <div class="requiredInput">
                        <div class="requiredBlock"></div>
                        <apex:inputField value="{!selectValue}">
                <apex:actionsupport event="onChange" action="check()" rerender="pBlock"/> 
                         <apex:inputfield>
                    </div>
            </apex:pageBlockSectionItem>
           <apex:pageBlockSection>
          <apex:pageBlock>
        <apex:commandLink value= "submit" action = "SSave"/>

Here is my apex save method

public void SSave(){
    insert t;(t is the instance)
}

And this is the Javascript I am using just to throw an alert when data is submitted

<script>
var ids = "{!t.id}";
if(ids.length!=0){
    alert('Data submitted successfully');
}
</script>  

When I write validation it's throwing exception, if I catch it the page remains still on submitting.( Field is of type picklist, I want the error to be displayed when user submits with a none value) Any help is much appreciated.

Answer 1

There are some issues with your validation construct. First the action attribute of the apex:actionSupport is not for the javascrict functions but for controller methods. Then don't forget to use braces if calling an apex method from the visualforce page action = "{!SSave}".

Use merge-field syntax to reference the method. For example, action="{!incrementCounter}" references the incrementCounter() method in the controller. If an action is not specified, the page simply refreshes.

Then i would do a validation after user submits the form (click on "Submit" button). We will invoke a validation javascript function and need to insert a return false; otherwise the page will be reloaded. In this examle i will not use a commandLink because i will not call any apex method from it. This work will take an actionFunction after validation is finished.

<apex:actionFunction name="saveNow" action="{!SSave}"/>

<apex:inputField value="{!selectValue}" id="myField"/>

<input type="button" value="Submit" class="btn" onclick="doValidation();">

<script>
function doValidation(){
    if(document.getElementById('{!$Component.myField}').value != ''){
        saveNow();
    }
    else{
        alert('Please fill out all fields!');
    }
}
</script>