added HTML attribute data-nette-error

Author: dg

src/Forms/Controls/BaseControl.php

@@ -234,6 +234,7 @@ public function getControl(): Html|string
 			'required' => $this->isRequired(),
 			'disabled' => $this->isDisabled(),
 			'data-nette-rules' => Nette\Forms\Helpers::exportRules($this->rules) ?: null,
+			'data-nette-error' => $this->hasErrors(),
 		]);
 	}
 

tests/Forms.Latte3/expected/forms.html

@@ -8,12 +8,12 @@
 		 <input type="hidden" name="id" value="" title="Hello" size="10">
 
 		<label for="frm-username">Username:</label>
-		<input type="text" name="username" size="10" class="control-class" id="frm-username" title="Hello">
+		<input type="text" name="username" size="10" class="control-class" id="frm-username" data-nette-error title="Hello">
 		error
 
 		<br>
 
-		<label for="frm-username" title="hello"> <input type="text" name="username" size="10" class="control-class" id="frm-username" title="Hello"> </label>
+		<label for="frm-username" title="hello"> <input type="text" name="username" size="10" class="control-class" id="frm-username" data-nette-error title="Hello"> </label>
 		error
 		<label for="frm-select"></label>
 		<select name="select" size="10" id="frm-select" title="Hello"><option value="m">male</option><option value="f">female</option></select>
@@ -43,11 +43,11 @@
 	<label for="frm-username">Username:</label>
 
 	<LABEL for="frm-username" title=hello>Name</LABEL>
-	<input value=val type class="hello" name="username" id="frm-username">
+	<input value=val type class="hello" name="username" id="frm-username" data-nette-error>
 
 	<label for="frm-username"></label>
 	<label for="frm-username">Username:</label>
-	<input type="text" name="username" class="control-class" id="frm-username">
+	<input type="text" name="username" class="control-class" id="frm-username" data-nette-error>
 
 	<label>My</label><input name=My>
 </form>
@@ -89,17 +89,17 @@
 
 
 <form action="" method="post" id="myForm" class="ajax">
-	<input type="text" name="username" class="control-class" id="frm-username">
+	<input type="text" name="username" class="control-class" id="frm-username" data-nette-error>
 <input type="hidden" name="id" value=""></form>
 
 
 <form action="" method="post" class="nclass">
-	<input type="text" name="username" id="frm-username" class="nclass">
+	<input type="text" name="username" id="frm-username" data-nette-error class="nclass">
 <input type="hidden" name="id" value=""></form>
 
 
 <FORM action="" method="post" class="form-class">
-	<input type="text" name="username" class="control-class" id="frm-username">
+	<input type="text" name="username" class="control-class" id="frm-username" data-nette-error>
 <input type="hidden" name="id" value=""></FORM>
 
 

tests/Forms/expected/Forms.renderer.1.expect

@@ -14,7 +14,7 @@
 <tr class="required">
 	<th><label for="frm-age" class="required">Your age:</label></th>
 
-	<td><input type="number" name="age" min="10" max="100" id="frm-age" required data-nette-rules='[{"op":":filled","msg":"Enter your age"},{"op":":integer","msg":"Please enter a valid integer."},{"op":":range","msg":"Age must be in range from 10 to 100","arg":[10,100]}]' class="text">
+	<td><input type="number" name="age" min="10" max="100" id="frm-age" required data-nette-rules='[{"op":":filled","msg":"Enter your age"},{"op":":integer","msg":"Please enter a valid integer."},{"op":":range","msg":"Age must be in range from 10 to 100","arg":[10,100]}]' data-nette-error class="text">
 	<span class="error">Enter your age</span></td>
 </tr>
 
@@ -54,14 +54,14 @@
 <tr>
 	<th><label for="frm-city">City:</label></th>
 
-	<td><input type="text" name="city" id="frm-city" data-nette-rules='[{"op":":equal","rules":[{"op":":filled","msg":"Enter your shipping address"}],"control":"send","arg":true}]' class="text">
+	<td><input type="text" name="city" id="frm-city" data-nette-rules='[{"op":":equal","rules":[{"op":":filled","msg":"Enter your shipping address"}],"control":"send","arg":true}]' data-nette-error class="text">
 	<span class="error">Enter your shipping address</span></td>
 </tr>
 
 <tr>
 	<th><label for="frm-country">Country:</label></th>
 
-	<td><select name="country" id="frm-country" data-nette-rules='[{"op":":equal","rules":[{"op":":filled","msg":"Select your country"}],"control":"send","arg":true}]'><option value="">Select your country</option><optgroup label="Europe"><option value="CZ">Czech Republic</option><option value="SK">Slovakia</option><option value="GB">United Kingdom</option></optgroup><option value="CA">Canada</option><option value="US">United States</option><option value="?">other</option></select>
+	<td><select name="country" id="frm-country" data-nette-rules='[{"op":":equal","rules":[{"op":":filled","msg":"Select your country"}],"control":"send","arg":true}]' data-nette-error><option value="">Select your country</option><optgroup label="Europe"><option value="CZ">Czech Republic</option><option value="SK">Slovakia</option><option value="GB">United Kingdom</option></optgroup><option value="CA">Canada</option><option value="US">United States</option><option value="?">other</option></select>
 	<span class="error">Select your country</span></td>
 </tr>
 
@@ -81,7 +81,7 @@
 <tr class="required">
 	<th><label for="frm-password" class="required">Choose password:</label></th>
 
-	<td><input type="password" name="password" id="frm-password" required data-nette-rules='[{"op":":filled","msg":"Choose your password"},{"op":":minLength","msg":"The password is too short: it must be at least 3 characters","arg":3}]' class="text"><input type="password" name="password2" id="frm-password2" data-nette-rules='[{"op":":valid","rules":[{"op":":filled","msg":"Reenter your password"},{"op":":equal","msg":"Passwords do not match","arg":{"control":"password"}}],"control":"password"}]' class="text"><input type="file" name="avatar" id="frm-avatar" data-nette-rules='[{"op":":fileSize","msg":"The size of the uploaded file can be up to %d% bytes.","arg":%d%},{"op":":filled","rules":[{"op":":image","msg":"Uploaded file is not image","arg":["image/gif","image/jpeg","image/png","image/webp"%a?%]}],"control":"avatar"}]' class="text">
+	<td><input type="password" name="password" id="frm-password" required data-nette-rules='[{"op":":filled","msg":"Choose your password"},{"op":":minLength","msg":"The password is too short: it must be at least 3 characters","arg":3}]' class="text"><input type="password" name="password2" id="frm-password2" data-nette-rules='[{"op":":valid","rules":[{"op":":filled","msg":"Reenter your password"},{"op":":equal","msg":"Passwords do not match","arg":{"control":"password"}}],"control":"password"}]' data-nette-error class="text"><input type="file" name="avatar" id="frm-avatar" data-nette-rules='[{"op":":fileSize","msg":"The size of the uploaded file can be up to %d% bytes.","arg":%d%},{"op":":filled","rules":[{"op":":image","msg":"Uploaded file is not image","arg":["image/gif","image/jpeg","image/png","image/webp"%a?%]}],"control":"avatar"}]' class="text">
 	<span class="error">Reenter your password</span></td>
 </tr>
 

tests/Forms/expected/Forms.renderer.2.expect

@@ -13,14 +13,14 @@
 
 	<dt><label for="frm-age" class="required">Your age:</label></dt>
 
-	<dd class="odd"><input type="number" name="age" min="10" max="100" id="frm-age" required data-nette-rules='[{"op":":filled","msg":"Enter your age"},{"op":":integer","msg":"Age must be numeric value"},{"op":":range","msg":"Age must be in range from 10 to 100","arg":[10,100]}]' value="9.9" class="text is-invalid"> •
+	<dd class="odd"><input type="number" name="age" min="10" max="100" id="frm-age" required data-nette-rules='[{"op":":filled","msg":"Enter your age"},{"op":":integer","msg":"Age must be numeric value"},{"op":":range","msg":"Age must be in range from 10 to 100","arg":[10,100]}]' data-nette-error value="9.9" class="text is-invalid"> •
 	<span class="error">Age must be numeric value</span></dd>
 
 
 
 	<dt><label for="frm-gender">Your gender:</label></dt>
 
-	<dd><select name="gender" id="frm-gender" class="is-invalid"><option style="color: #248bd3" value="m">male</option><option style="color: #e948d4" value="f">female</option></select>
+	<dd><select name="gender" id="frm-gender" data-nette-error class="is-invalid"><option style="color: #248bd3" value="m">male</option><option style="color: #e948d4" value="f">female</option></select>
 	<span class="error">Please select a valid option.</span></dd>
 
 
@@ -73,7 +73,7 @@
 
 	<dt><label for="frm-password" class="required">Choose password:</label></dt>
 
-	<dd class="multi"><input type="password" name="password" id="frm-password" required data-nette-rules='[{"op":":filled","msg":"Choose your password"},{"op":":minLength","msg":"The password is too short: it must be at least 3 characters","arg":3}]' class="text is-invalid"><input type="password" name="password2" id="frm-password2" data-nette-rules='[{"op":":valid","rules":[{"op":":filled","msg":"Reenter your password"},{"op":":equal","msg":"Passwords do not match","arg":{"control":"password"}}],"control":"password"}]' class="text"> • <small>(at least 3 characters)</small>
+	<dd class="multi"><input type="password" name="password" id="frm-password" required data-nette-rules='[{"op":":filled","msg":"Choose your password"},{"op":":minLength","msg":"The password is too short: it must be at least 3 characters","arg":3}]' data-nette-error class="text is-invalid"><input type="password" name="password2" id="frm-password2" data-nette-rules='[{"op":":valid","rules":[{"op":":filled","msg":"Reenter your password"},{"op":":equal","msg":"Passwords do not match","arg":{"control":"password"}}],"control":"password"}]' class="text"> • <small>(at least 3 characters)</small>
 	<span class="error">The password is too short: it must be at least 3 characters</span></dd>
 
 

tests/Forms/expected/Forms.renderer.translate.expect

@@ -15,7 +15,7 @@
 <tr class="required">
 	<th><label for="frm-password" class="required">PASSWORD</label></th>
 
-	<td><input type="password" name="password" id="frm-password" required data-nette-rules='[{"op":":filled","msg":"THIS FIELD IS REQUIRED."},{"op":":minLength","msg":"MINIMAL LENGTH IS %D CHARS","arg":8}]' class="text">
+	<td><input type="password" name="password" id="frm-password" required data-nette-rules='[{"op":":filled","msg":"THIS FIELD IS REQUIRED."},{"op":":minLength","msg":"MINIMAL LENGTH IS %D CHARS","arg":8}]' data-nette-error class="text">
 	<span class="error">WEAK PASSWORD</span></td>
 </tr>