visualforce captcha

<apex:outputLabel value="" />    
    <apex:outputPanel style=" background-color: #E8E8E8; border-style: solid; border-width:1px; width: 150px; text-align: center;" layout="block" id="code">
        <apex:outputText value="{!char1}" style="color: red; font-weight: bold;  font-size: 30px; padding:5px;"/>
        <apex:outputText value="{!char2}" style="color: black; font-size: 12px; padding:5px;"/>
        <apex:outputText value="{!char3}" style="color: red; font-weight: bold; font-size: 18px; padding:5px;"/>
        <apex:outputText value="{!char4}" style="color: black; font-size: 20px; padding:5px;"/>
        <apex:outputText value="{!char5}" style="color: red; font-weight: bold; font-size: 17px; padding:5px;"/>
        <apex:outputText value="{!char6}" style="color: black; font-size: 24px; padding:5px;"/>

<apex:commandButton value="Reset" rerender="code"/>
Enter only the <font size="3" color="red">only the red</font> characters 
<apex:inputText value="{!input}"/>

in controller constructor
     characters = new List<String>{'a','b','c','d','e','f','g','h',


in controller
 List<String> characters;
    public String input {get; set;}
    public String result {get; set;}
    String char1;
    String char3;
    String char5;

    //In our contructor we will populate a list of strings with numbers and letters

    //This methods simply returns a random number between 0 and the size of the character list
    public Integer randomNumber(){
        Integer random = Math.Round(Math.Random() * characters.Size());
        if(random == characters.size()){
        return random;

    /*Here we have 6 get methods that return 6 random characters to the page.
    For chars 1,3, and 5 (the black characters) we are saving the the values so 
    that we can compare them with the user's input */
    public String getChar1(){
        char1 = characters[randomNumber()];
        return char1;
    public String getChar2(){
        return characters[randomNumber()];
    public String getChar3(){
        char3 = characters[randomNumber()];
        return char3;
    public String getChar4(){
        return characters[randomNumber()];
    public String getChar5(){
        char5 = characters[randomNumber()];
        return char5;
    public String getChar6(){
        return characters[randomNumber()];

 condition in action for validation button

        if(input.length() == 3 && input.subString(0,1) == char1 && input.subString(1,2) == char3 && input.subString(2,3) == char5){ 

// Validation done do what ever u want

         ApexPages.Message msg = new ApexPages.Message(ApexPages.Severity.ERROR, 'CAPTCHA verification attempt failed .........');
           // System.debug('reCAPTCHA verification attempt with empty form');
            return null; 


Popular Posts