Ext.ns('Ext.ux.form'); /** * A form field that automatically generates mathematical challenge question to subvert Robot / Spam abuse.

* Notes:

A configurable mathematical equation is used to validate the field.
The equation may be of varying form and/or complexity.
Randomly generated equations for specified operation types (addition, * multiplation, subtraction) and configurable solution presentation * (linear form of 5+3=?, reverse form of 5+?=8, or either of these randomly * chosen).
The validation message (equation) will display as the validation error.

*
Demo link: here *
Forum thread: here *

* Usage: *

var sample = new Ext.FormPanel({
    labelWidth: 80,  
    url:'registration.php',
    frame:true,
    title: 'Sample Form',
    bodyStyle:'padding:5px 5px 0',
    width: 350,
    defaults: {width: 230},
    defaultType: 'textfield',
    items: [{
            fieldLabel: 'First Name',
            name: 'first'
        },{
            fieldLabel: 'Last Name',
            name: 'last'
        },{
            fieldLabel: 'Are you human?',
            name: 'human',
            xtype: 'botfield'
            //optionally override a qtip that will be displayed (depends on
            //an Ext.form.Field being installed
            //qtip:{
                //text:'To verify you are not a robot, please enter the value that satisfies this equation:',
                //width: 220
            //}
        }],
    buttons: [{
        text: 'Save'
    },{
        text: 'Cancel'
    }]
});

* @class Ext.ux.form.BotField * @extends Ext.form.TextField * @author Michael LeComte (mjlecomte) * @license LGPL 3.0 * @version 0.06 - Sep 28, 2008 * @ version 0.05 - Sep 4, 2008 * @ version 0.04 - Aug 29, 2008 * @ version 0.03 - Aug 2, 2008 * @ version 0.02 - Jul 15, 2008 * @ version 0.01 - Jul 15, 2008 * @donate */ Ext.ux.form.BotField = Ext.extend(Ext.form.NumberField, { //reconfigurables /** * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true) */ allowNegative : true, /** * @cfg {String} answerText Text to indicate where the answer should be (defaults to "?") */ answerText : "?", /** * @cfg {String} answerLocation Location the answer may be positioned relative to the "=" * sign, options are "after", "before", or "either" (defaults to "either"). */ answerLocation : "either", /** * @cfg {Array} answerOperators Specify which mathematical operators may be used for the * generated equation. Since division operator "/" may result in decimal answers, division * is not allowed. By default add, subtract, and multiply operators will be used randomly * to generate the equation: *

answerOperators : ["+","-","*"]

*/ answerOperators : ["+","-","*"], /** * @cfg {String} errorText The prefix text to display before the equation in the validation * error message. (defaults to "Enter the number which satisfies the equation:
") */ errorText : "Enter the number which satisfies the equation:
", /** * @cfg {Boolean} hideQuestion True to delete contents of textfield if the value is still * equal to the validation question (defaults to true). */ hideQuestion: true, /** * @cfg {String} messageText Text to display as part of qtip (defaults to * "To verify you are not a robot, please enter the number that satisfies this equation:
") */ messageText : 'To verify you are not a robot, please enter the number that satisfies this equation:
', /** * @cfg {Boolean} showQuestion True to display the validation question initially the field * value (defaults to true) */ showQuestion : true, /** * @cfg {Boolean} selectOnFocus True to automatically select any existing field text when the * field receives input focus (defaults to true) */ selectOnFocus : true, //end reconfigurables /* * extend onRender in order to apply the tooltip message */ /** @private */ onRender : function(){ //set the random equation and result to thwart bots this.setBotValue(); if(!this.qtip){ this.qtip = {}; } //designed to work with an Ext.form.Field override which will display qtips if (this.qtip) { this.qtip.text = this.qtip.text || this.messageText + '' + this.botMessage + ''; this.qtip.width = this.qtip.width || 220; } //show the question in the field (if specified via config) if (this.showQuestion) { //this.el.dom.value = this.botMessage; //this.emptyText = this.botValMessage; this.emptyText = this.botMessage; } //call parent Ext.ux.form.BotField.superclass.onRender.apply(this, arguments); }, // end onRender /** @private */ initEvents : function(){ Ext.apply(this, { /** * (Boolean} allowDecimals False to disallow decimal values (defaults to true) */ allowDecimals : false, allowBlank: false }); //call parent Ext.ux.form.BotField.superclass.initEvents.apply(this, arguments); this.validator = this.validateBotValue; }, // end of initEvents /** * {Function} validateBotValue The custom validation function that is called * during field validation. This function is called only after the basic ext * validators all return true. This function is passed the current field * value will return boolean true if the value is valid or a string error * message if invalid. */ /** @private */ validateBotValue : function(v){ if (v != this.botAnswer){ return this.errorText + this.botValMessage; } return true; }, // end validateBotValue /** * {Function} setBotValue Sets the random equation and corresponding solution. */ /** @private */ setBotValue : function(){ //generate two random numbers var a = Math.ceil(Math.random() * 10); var b = Math.ceil(Math.random() * 10); //determine which operator to use //random number between 0 and length of array var max = this.answerOperators.length - 1; var min = 0; var i = Math.floor((max-(min-1))*Math.random()) + min; var operator = this.answerOperators[i]; //some shuffling if don't want negative if ((operator == '-') && !this.allowNegative){ var hi = Math.max(a,b); b = Math.min(a,b); a = hi; } //determine how to compose equation var equation = a + operator + b; //determine and set solution this.botAnswer = eval(equation); if (this.answerLocation == 'either') { this.answerLocation = (a < b) ? 'before' : 'after'; } var beforeEqual, afterEqual; if (this.answerLocation == 'after') { beforeEqual = b; afterEqual = this.answerText; } else { beforeEqual = this.answerText; afterEqual = this.botAnswer; this.botAnswer = b; } //Set the message to display initial question and validation failure messages. this.botMessage = String.format('{0} {1} {2} = {3}', a, operator, beforeEqual, afterEqual); this.botValMessage = ''+this.botMessage+''; } // end setBotValue }); //register xtype Ext.reg('botfield', Ext.ux.form.BotField);