Online javascript tutorials for Captcha code don't work with CakePHP 4

I tried both of the above captcha code tutorials and neither one worked with my UsersController. I was able to register every time that I typed in the wrong captcha code. This is from my registration method in my UsersController:

if($this->request->is('post')){
if($userTable->save($user)){
	return $this->redirect(['controller' => 'Users', 'action' => 'login']);
		}
		else
		{
			$this->Flash->error(__(' '));
		}
	}

I tried to make a validation rule in my Users table, but it didn’t work. Maybe I have to create the fields in the database for it to work but I’m not sure which fields I should use.

$validator -> sameAs('theCaptcha','recaptcha','Captcha is false');

I tried to adapt the CakePHP submit button to match the javascript captcha button as follows:

<?php echo $this->Form->button(__('Register'),['onclick'=>'validateCaptcha()']); ?>
<?php echo $this->Form->submit(__('Register'),['class'=>'input_field button disabled']); ?>

Sorry, I’m not clear. You’ve created two Register buttons in your form?

When your validation rule fails to generate an error, what does the user entity look like? In particular, what’s in the theCaptcha and recaptcha fields? And how did anything get into that entity, when you apparently haven’t patched your form data into it?

Thanks for your feedback, Zuluru. I was showing the codes I used for each of the tutorials. One code per tutorial not 2 buttons.
I wrote the validation rule without creating fields in the table because I don’t know exactly which variable from the given code to use as fields.

You shouldn’t need for there to be fields in the database for this. You will need for the entity to accept the data. You haven’t addressed the question about how that’s happening, or what the entity looks like when you try to save it.

I typed this into the UsersTable model:
$validator -> sameAs('errCaptcha','reCaptcha','Captcha is false');

I thought it was the right variables to use from this tutorial: Build a Captcha Generator Using JavaScript | by Handhika Yanuar Pratama | JavaScript in Plain English

I added this to the User entity

protected $_accessible = [
		'errCaptcha' => true,
        'reCaptcha' => true,
];

I googled cakephp entity and got this website: Class Entity | CakePHP 4.0 but it didn’t help. Can you recommend a more simple tutorial about cakephp entities?

The names of the variables you use have to be the same in

  1. the signup form
  2. the validation call
  3. the _accessible property

Sorry, I don’t know where you’d find a tutorial for what you’re looking for.

Thanks, Zuluru. I have the names of the variables in the validator and the accessible as follows:

in src/Model/Entity/User.php

protected $_accessible = [ 
      'captchaText' => true,
      'captchaInputBox' => true,		
    ];

in src/Model/Table/UsersTable.php

$validator
            ->scalar('captchaText')
            ->notEmptyString('captchaText');
			
		$validator
            ->scalar('captchaInputBox')
            ->notEmptyString('captchaInputBox');
			
		$validator -> sameAs('captchaText', 'captchaInputBox','Captcha is false');

I don’t have these variables in my form. I got the variables from the javascript. The form just has classes like this:

<div class="input_field button disabled">
<button class="" type="submit">Register</button></div>

Using code from this tutorial:

captchaText is the generated captcha and captchaInputBox is the submitted captcha.

The form was only using classes and the text input fields had empty names so I added a couple of text boxes with the names captchaText_ and captchaInputBox_ as follows:

<div class="input_field captch_box">
<?php echo $this->Form->text('captchaText_',['class'=>'input_field captch_box']);?>
</div>
<div class="input_field captch_input">
<?php echo $this->Form->text('captchaInputBox_',['class'=>'input_field captch_input']);?>
</div>

I editted the validators and the accessible property to reflect the new names with underscores. It’s now working but the error message “Entered captcha is not correct” shows up for just a split second and then disappears.

I know I need to learn some javascript to solve this problem but I’ve been AFK for the past week.

I ended up installing the google recaptcha version 2 widget and had no difficulties getting it integrated into my project.