Javascript Validations in Visualforce Pages

It is very important to have form validations in the visualforces to maintain Data Integrity and Data Consistency. Developers may know the type of input that a field can hold, but may not be the case with end users.

Hence Validations in our Visualforce pages plays major role and hence this post .

Let us consider few examples,
1. Phone field may contain only number or hyphen(-)
2. Field should contain only Lower Case letters
3. Field should contain only Upper Case letters
4. Field should contain only Alphabets and Numbers not allowed

Traditional Method:

Usually we will check the input provided by the User only on clicking the save / submit button.
Hence on clicking it, system will check for the match of data supplied and with the data as it should be.
In case of not matching, Users will be alerted either by
1. Javascript alerts or
2. Page Messages or
3. Validation rule messages

All these three methods will alert Users after clicking the Save button which may be an additional step sometimes.

Suggested Method:

This method of implementing script validations makes use of the keypress event of the input elements and validates the keyed value in the field then and there. Suppose if the field should contain only alphabets, and on keying numbers or any other special characters then keypress event was deducted and the inputted data will be rejected.

Example:

If any character other than alphabet is keyed in the "Number only", they will not be accepted and goes ineffective.

<apex:page standardcontroller="Account">
<script type="text/javascript">
//allows alphabets only both upper and lower case 
function AllowAlpha(e) 
{
    var a = e.charCode;
    return ((a>=65 && a<=90) || (a>=97 && a<=122));
}
//allows number and hyphen only 
function AllowNumeric(e)
{
    var a = e.charCode;
    return ((a >= 48 && a <= 57)|| a==45);
}
//changes lowercase to uppercase when each alphabet is keyed in 
function toUpper(c)
{
    var val = document.getElementById(c).value;
    document.getElementById(c).value=val.toUpperCase();
}
//changes uppercase to lowercase when each alphabet is keyed in 
function toLower(c)
{
    var val = document.getElementById(c).value;
    document.getElementById(c).value=val.toLowerCase();
}
</script>
<apex:sectionheader subtitle="New Account" title="Account Edit">
<apex:form>
<apex:pageblock mode="edit">
    <apex:pageblockbuttons location="top" title="Account Edit">
        <apex:commandbutton action="{!save}" value="Save">
        <apex:commandbutton value="Cancel">
    </apex:commandbutton></apex:commandbutton></apex:pageblockbuttons>
    <apex:pageblocksection>
        <apex:inputfield value="{!Account.Name}"/>
        <apex:inputfield value="{!Account.Rating}"/>
        <apex:inputfield value="{!Account.ParentId}"/>
        <apex:inputfield value="{!Account.Ownership}"/>
        <apex:inputfield id="number" onkeypress="return AllowNumeric(event)" value="{!Account.Number_Only__c}"/>
        <apex:inputfield id="text" onkeypress="return AllowAlpha(event)" value="{!Account.Text_Only__c}"/>
        <apex:inputfield id="upper" onkeydown="toUpper('{!$Component.this}')" onkeyup="toUpper('{!$Component.this}')" value="{!Account.Upper_Case__c}"/>
        <apex:inputfield id="lower" onkeydown="toLower('{!$Component.this}')" onkeyup="toLower('{!$Component.this}')" value="{!Account.Lower_Case__c}"/>
    </apex:pageblocksection>
</apex:pageblock>
</apex:form>
</apex:sectionheader>
</apex:page>

Hence only the valid data key events were accepted and performs the Validation dynamically, more user-friendly and effective (instead of allowing wrong data in and then alerting it).