Hi
I need to customize active form error display. For instance, I want to add some animation or simple visual effects to error messages.
How can I do it with less pain? Any Ideas?
Hi
I need to customize active form error display. For instance, I want to add some animation or simple visual effects to error messages.
How can I do it with less pain? Any Ideas?
At the time of validation error, a class "has-error" is getting added to the div. That time only the error is getting displayed. You may create animations for class "has-error".
<div class="form-group field-loginform-password required has-error">
<label class="control-label" for="loginform-password">Password</label>
<input id="loginform-password" class="form-control" name="LoginForm[password]" type="password">
<p class="help-block help-block-error">Password cannot be blank.</p>
</div>
Apparently, binding a trigger to "adding has-error class" event in JQuery is torment.
Customizing form reactions is a common requirement in projects, I reckon. Isn’t there any simpler solution in order to do it without overriding half of the framework?
You do not have to add has-error class.
It is taken care by the framework. You have to build your css for has-error class. No invention by you.
I already got it when I read your answer. The thing is I need to bind JS functionalities to that has-error class NOT CSS. For instance, I’m willing to use JQuery slideIn(), slideOut for showing error messages.
I appreciate you for your help, anyway.
I have two suggestions in your case.
As already mentioned, use CSS3 animations
yii\widgets\ActiveForm widget is using yii2\assets\yii.activeForm.js.
If you can extend the ActiveForm widget as your custom widget, you can use a similar js file. Only difference in your js file will be that in addition to add errorCssClass, you will do the animations also using jQuery. I do not know how much difficult this will be as I have not tried.