+ Start a Discussion
vijay kumar kvijay kumar k 

how to validate fields on visualforce page

Insert creditcard records using visualforce page.In page use java script to validate fields like Cardnumber must 16digits ,pin number must 4digits and insert only checkbox(active__c) is true.Below i mention object details. 

Custom object:Credit_Card__c

as per my knowledge i build this vf page but from that apex method is not calling .Is there any mistake i return there .
Here i post my code ,please check and replay the best

VF Page:
<apex:page standardController="Creadit_Card__c" extensions="CreditCard_Creation">
    <apex:includeScript value="{!URLFOR($Resource.jquery)}"/>
    <apex:includeScript value="{!URLFOR($Resource.jqueryui)}"/>
    <apex:includeScript value="{!URLFOR($Resource.jqueryuimin)}"/>
        alert('Jquery loaded successfull....');    
    function checkallfields()
        var card=j$('[id$=cardnumber1]').val();
        var pin=j$('[id$=pin1]').val();
        var clength=card.length;
        var n = pin.toString();
        var n1=n.length;
        if(clength==16 && n1==4){
            alert('Check Card Number or Pin Number are correct values')
    <apex:form id="f1">
        <apex:pageBlock title="Creadit Card" id="pb1">
            <apex:pageBlockSection id="pbs1">
                <apex:inputField id="Contactname1" value="{!Creadit_Card__c.Contact_Name__c}" required="true"/>
                <apex:inputField id="cardnumber1" value="{!Creadit_Card__c.Name}"/>
                <apex:inputField id="pin1" value="{!Creadit_Card__c.PIN__c}"/>
                <apex:inputCheckbox id="checkbox1" value="{!Creadit_Card__c.Active__c}" required="true"/>
            <apex:commandButton value="save" onclick="checkallfields()" />
            <apex:actionFunction name="ready" action="{!saverecord}"/>
            <apex:pageMessages ></apex:pageMessages>

Apex Class:
public class CreditCard_Creation {
    public Creadit_Card__c chkcardValues{set;get;}
    public CreditCard_Creation(ApexPages.StandardController controller) {
    public pagereference  saverecord(){
        list<Creadit_Card__c> cardslist=[select name from Creadit_Card__c where name=:chkcardValues.Name];
            insert chkcardValues;
                ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.Error,'This card number is already existed'));
            ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.Error,'please select active'));
             pagereference redirect=new pagereference ('/'+chkcardValues.id);
             return redirect;
        return null;
Deepali KulshresthaDeepali Kulshrestha
Hi Vijay,

Please have a look at the code and change it accordingly to your need

<script type="text/javascript">
    // This function is being used for providing different validation on your text box as per your need
    function ValidatedField(e, allow) {
        var AllowableCharacters = '';
        if (allow == 'Letters') {
            AllowableCharacters = ' ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
        if (allow == 'Numbers') {
            AllowableCharacters = '1234567890';
        if (allow == 'NameCharacters') {
            AllowableCharacters = ' ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-.\'';
        if (allow == 'NameCharactersAndNumbers') {
            AllowableCharacters = '1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-\'';
        if (allow == 'Currency') {
            AllowableCharacters = '1234567890.';
        var k = document.all ? parseInt(e.keyCode) : parseInt(e.which);
        if (k != 13 && k != 8 && k != 0) {
            if ((e.ctrlKey == false) && (e.altKey == false)) {
                return (AllowableCharacters.indexOf(String.fromCharCode(k)) != -1);
            } else {
                return true;
        } else {
            return true;

For more information please go through through the given links:

- https://salesforce.stackexchange.com/questions/107385/how-to-validate-the-fields-used-in-a-visualforce-page
- http://santanuboral.blogspot.com/2017/01/visualforce-input-validation-component.html
- https://opfocus.com/javascript-validation-in-a-visualforce-page/

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha