HTML Tag Validations

• Download bootstrap zip from the documentation page. Download
• Download jQuery code from the documentation page. Download

Create and add captcha code in your page

Add Captcha model in Captcha.php

                
/**
 * Generate captcha.
 * 
 * type - 1 -> Maths
 */
class Captcha {
    private $type;
    private $fieldName;
    private $question;
    private $answer;

    function __construct($type, $fn, $q, $ans) {
        $this->type = $type;
        $this->fieldName = $fn;
        $this->question = $q;
        $this->answer = $ans;
    }

    public function getQuestion() { return $this->question; }
    public function getFieldName() { return $this->fieldName; }
    public function getAnswer() { return $this->answer; }
}
                
            

Write the generate random captcha in DatabaseStringConstants.php table name and column name

                
class DatabaseStringConstants {
public static $TBL_CAPTCHA = "captcha";
public static $COL_FIELD_NAME = "field_name";
public static $COL_TYPE = "type";
public static $COL_QUESTION = "question";
public static $COL_VALUE = "value";
}
        

Write the generate random captcha in UtilityService.php, If you want to create capcha with Database entry, then pass $noDb = true

                
static function generateRandomCaptcha($length=10, $type=1, $noDb = false) {
    $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    $charactersLength = strlen($characters);
    $randomString = 'tr-';
    for ($i = 2; $i < $length; $i++) {
        $randomString .= $characters[random_int(0, $charactersLength - 1)];
    }
    $x = rand(10,50);
    $y = rand(10,50);
    $value = $x + $y;
    $question = "$x + $y = ";
    $captcha = new Captcha($type, $randomString, $question, $value);
    if ($noDb) {
        $db = new DBConnectionService();
        $con = $db->getConnection();

        $insertQuery = "INSERT INTO ". DatabaseStringConstants::$TBL_CAPTCHA . " ( " .
            DatabaseStringConstants::$COL_TYPE . ", " . DatabaseStringConstants::$COL_FIELD_NAME . ", " .
            DatabaseStringConstants::$COL_QUESTION . ", " . DatabaseStringConstants::$COL_VALUE . " ) VALUES (" .
            $type . ", '" . $randomString . "', '" . $question . "', '" . $value . "');";
        mysqli_query($con, $insertQuery);
    }
    return $captcha;
}
                
            

Add the HTML tag to accept captcha code

                
<div class="form-group">
    <div id="captchaQuestion"><?php echo $captcha->getQuestion(); ?></div>
    <input type="text" id="<?php echo $captcha->getFieldName(); ?>" class="form-control"
        name="<?php echo $captcha->getFieldName(); ?>" value="<?php echo $captcha->getAnswer(); ?>" required></td>
    <div id="div_captcha"></div>
    <span id="captchaError" class="error"></span>
</div>
                
            

Add the jQuery script code to work captcha properly.

                
$("#<?php echo $captcha->getFieldName(); ?>").on( "change", function() {
    validateCaptcha();
} );
function validateCaptcha() {
    var ans = $("#<?php echo $captcha->getFieldName(); ?>").val();
    console.log(ans + " " + <?php echo $captcha->getAnswer(); ?>)
    if (ans == "<?php echo $captcha->getAnswer(); ?>") {
        $("#captchaError").text("");
        $("#div_captcha").html('<img src="public/images/green_tick.png" />');
        return true;
    }
    $("#div_captcha").html('');
    $("#captchaError").text("Invalid captch.").css("color", "red");
    return false;
}