Skip to Content

Hi All,

In this blog I am going to explain how to generate a random captcha code with characters and numbers. And if you press the refresh button a new captcha code need to be generated in place of old captcha code.

And need to validate the captcha for that if we enter the same captcha it need to display an alert that shows whether the entered captcha is right or wrong if we do not enter any captcha and try to validate it need to display an alert with please enter the captcha.

Let’s see how I achieved this functionality.

Below is my view. I had taken two input fields one for the generated captcha code and other to enter manually. And also two buttons one for refreshingcaptcha code and one for validating.

View.view.xml:

<mvc:View controllerName="captcha.controller.View1" 
xmlns:html="http://www.w3.org/1999/xhtml" 
xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<App>
<pages>
<Page title="{i18n>title}">
<content >
<Vbox class="sapUiResponsiveMargin">
<Text text="Please Enter the Captcha"/>
<Hbox >
<Input editable="false" id="generatecaptcha" value="" width="90%"/>
<Button press="onRefresh" text="Refresh"/>
</Hbox>
<Input id="captchacheck" value="" width="15%"/>
<Button press="onValidate" text="Check"/>
</Vbox>
</content>
</Page>
</pages>
</App>
</mvc:View>

For generating captcha code randomly I defined  a JS file.

captcha.js:

sap.ui.define(["./Captcha"], function() {
return {
customMethod: function() {
var alpha = new Array("A", "B", "C", "D", "E", "F", "G","H", "I", "J", 
                      "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", 
                      "U", "V", "W","X", "Y", "Z", "a", "b", "c", "d", 
                      "e", "f", "g", "h", "i", "j", "k", "l", "m", "n",
                      "o", "p", "q", "r", "s", "t", "u", "v", "w", "x",
		      "y", "z");
			var i;
for (i = 0; i < 6; i++) {
	var a = alpha[Math.floor(Math.random() * alpha.length)];
        var b = Math.ceil(Math.random() * 10) + "";
	var c = alpha[Math.floor(Math.random() * alpha.length)];
	var d = alpha[Math.floor(Math.random() * alpha.length)];
	var e = Math.ceil(Math.random() * 10) + "";
	var f = alpha[Math.floor(Math.random() * alpha.length)];
	var g = alpha[Math.floor(Math.random() * alpha.length)];
}
var code = a + " " + b + " " + " " + c + " " + d + " " + e + " " + f + " " + g;
var bCode = code.split(" ").join("");
return bCode;
}
};
});

I used this JS file in my controller where ever it is required.

So, on loading of the map I need to display the captcha code so, I require this JS file in onInit function();

onInit: function() {
var that = this;
sap.ui.require(["captcha/controller/captcha"], function(captcha) {
var sCaptcha = captcha.customMethod();		
that.byId("generatecaptcha").setValue(sCaptcha);
});
},

In the above path first captcha is my namespace and controller is my folder and second captcha is my file name.

When I click on refresh button again it need to change the code for that I place it again in the button function.

onRefresh: function() {
var that = this;
sap.ui.require(["captcha/controller/captcha"], function(captcha) {
var rCaptcha = captcha.customMethod();
that.byId("generatecaptcha").setValue(rCaptcha);
});
},

Now when I check for validation if validation is correct or wrong again a new captcha code need to generate with an alert. If the input is empty and we go for validation an alert need to display without changing the captcha code.

onValidate: function() {
var Input1 = this.byId("generatecaptcha").getValue();
var Input2 = this.byId("captchacheck").getValue();
if (Input2 === "") {
	alert("Please enter the captcha");
} 
else if (Input1 === Input2) {
alert("Validation is Correct");
var that = this;
sap.ui.require(["captcha/controller/captcha"], function(captcha) {
var captchaCorrect = captcha.customMethod();
that.byId("generatecaptcha").setValue(captchaCorrect);
});
this.byId("captchacheck").setValue("");
} 
else {
alert("Validation is wrong");
var that = this;
sap.ui.require(["captcha/controller/captcha"], function(captcha) {
var captchaWrong = captcha.customMethod();
that.byId("generatecaptcha").setValue(captchaWrong);
});
this.byId("captchacheck").setValue("");
}
}

alert for Correct validation.

alert for wrong validation

alert for empty validation

I hope this will help you to generate your own Captcha code

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Mohamed Ansari

    This is nice blog..Thanks for the content..Here I have a quick question

     

    In the onInit()/ onRefresh() you have used below code

    sap.ui.require([“captcha/controller/captcha”], function(captcha)

    var rCaptcha = captcha.customMethod();

     

    I am not aware of argument passing function(captcha

     

    what is the significance of argument parameter  function(captcha)

     

    Cant we get the directly the return bCode;?

    (1) 
    1. Ashok Kumar Reddy Gosala Post author

      It is not possible to get the return value from separate module with out passing the argument.

      Significance of the argument is we can achieve the  functionality available in the module by defining the argument.

      another way of passing the argument is defining the module and argument globally

      sap.ui.define([
      	"sap/ui/core/mvc/Controller",
      	"captcha/controller/captcha"
      ], function(Controller,captcha) {
      	"use strict";
      
      return Controller.extend("captcha.controller.View1", {
      
      onInit: function() {
      var that = this;
      var sCaptcha = captcha.customMethod();
      that.byId("generatecaptcha").setValue(sCaptcha);
      },
      
      onRefresh: function() {
      var that = this;
      var rCaptcha = captcha.customMethod();
      that.byId("generatecaptcha").setValue(rCaptcha);
      },
      
      onValidate: function() {
      var Input1 = this.byId("generatecaptcha").getValue();
      var Input2 = this.byId("captchacheck").getValue();
      if (Input2 === "") {
      alert("Please enter the captcha");
      }
      else if (Input1 === Input2) {
      alert("Validation is Correct");
      var that = this;
      var captchaCorrect = captcha.customMethod();
      that.byId("generatecaptcha").setValue(captchaCorrect);
      this.byId("captchacheck").setValue("");
      } 
      else {
      alert("Validation is wrong");
      var that = this;
      var captchaWrong = captcha.customMethod();
      that.byId("generatecaptcha").setValue(captchaWrong);
      this.byId("captchacheck").setValue("");
      }
      }
      });
      });
      (0) 

Leave a Reply