Adding custom form control validation messages for required fields

src/View/Helper/FormHelper.php

@@ -1433,6 +1433,13 @@ class FormHelper extends Helper
             $options['required'] = $context->isRequired($fieldName);
         }
 
+        $message = $context->getErrorMessage($fieldName);
+        if ($options['required'] && $message) {
+            $message = htmlspecialchars(addslashes($message));
+            $options['oninvalid'] = "this.setCustomValidity('$message')";
+            $options['onvalid'] = "this.setCustomValidity('')";
+        }
+
         $type = $context->type($fieldName);
         $fieldDef = $context->attributes($fieldName);
 

tests/TestCase/View/Helper/FormHelperTest.php

@@ -8339,7 +8339,9 @@ class FormHelperTest extends TestCase
                     'name',
                     'required' => 'required',
                     'id' => '0-comments-1-comment',
-                    'rows' => 5
+                    'rows' => 5,
+                    'onvalid' => 'this.setCustomValidity('')',
+                    'oninvalid' => 'this.setCustomValidity('This field cannot be left empty')',
                 ],
                 '/textarea',
             '/div'
@@ -8418,6 +8420,82 @@ class FormHelperTest extends TestCase
     }
 
     /**
+     * tests fields that are required use custom validation messages
+     *
+     * @return void
+     */
+    public function testHtml5ErrorMessage()
+    {
+        $validator = (new \Cake\Validation\Validator())
+            ->requirePresence('email', true, 'Custom error message')
+            ->requirePresence('password')
+            ->alphaNumeric('password')
+            ->notBlank('phone');
+
+        $table = $this->getTableLocator()->get('Contacts', [
+            'className' => __NAMESPACE__ . '\ContactsTable'
+        ]);
+        $table->setValidator('default', $validator);
+        $contact = new Entity();
+
+        $this->Form->create($contact, ['context' => ['table' => 'Contacts']]);
+        $this->Form->setTemplates(['inputContainer' => '{{content}}']);
+
+        $result = $this->Form->control('password');
+        $expected = [
+            'label' => ['for' => 'password'],
+            'Password',
+            '/label',
+            'input' => [
+                'id' => 'password',
+                'name' => 'password',
+                'type' => 'password',
+                'value' => '',
+                'required' => 'required',
+                'onvalid' => 'this.setCustomValidity('')',
+                'oninvalid' => 'this.setCustomValidity('This field is required')',
+            ]
+        ];
+        $this->assertHtml($expected, $result);
+
+        $result = $this->Form->control('phone');
+        $expected = [
+            'label' => ['for' => 'phone'],
+            'Phone',
+            '/label',
+            'input' => [
+                'id' => 'phone',
+                'name' => 'phone',
+                'type' => 'tel',
+                'value' => '',
+                'maxlength' => 255,
+                'required' => 'required',
+                'onvalid' => 'this.setCustomValidity('')',
+                'oninvalid' => 'this.setCustomValidity('This field cannot be left empty')',
+            ]
+        ];
+        $this->assertHtml($expected, $result);
+
+        $result = $this->Form->control('email');
+        $expected = [
+            'label' => ['for' => 'email'],
+            'Email',
+            '/label',
+            'input' => [
+                'id' => 'email',
+                'name' => 'email',
+                'type' => 'email',
+                'value' => '',
+                'maxlength' => 255,
+                'required' => 'required',
+                'onvalid' => 'this.setCustomValidity('')',
+                'oninvalid' => 'this.setCustomValidity('Custom error message')',
+            ]
+        ];
+        $this->assertHtml($expected, $result);
+    }
+
+    /**
      * testRequiredAttribute method
      *
      * Tests that formhelper sets required attributes.