Style Membership Form Errors when set to be inline
Development and Programming
How does one style inline form errors for membership registration? In the source code for example, one field looks like this before submitting with an error:
<label for=”username”>Username*: </label> <input type=”text” name=”username” id=”username” value=”“/>
After submitting and an error message, the source looks like this:
<label for=”username”>Username*: This field is required.</label> <input type=”text” name=”username” id=”username” value=”“/>
My question is how do we apply a class or any kind of styling to the error message, so that it can stand out, when it just becomes a part of the label tag? There doesn’t appear to be a way to add a class to error messages, so how can we make them look different and stand out?
Are you using the old style “Member profile” templates or the later registration form tags? https://docs.expressionengine.com/latest/member/registration.html
If you’re using the newer registration form the example gives you for instance:
<label for="username">Username*: {if error:username}{error:username}{/if}</label>
<input type="text" name="username" id="username" value="{if username}{username}{/if}"/>You can add a span tag to the error tag to give you a styling hook:
{if error:username}<span class="your_class">{error:username}</span>{/if}Yes I am using the new registration form tags - Thanks so much for your reply - that’s really helpful - and of course, now it makes complete sense to me! Thanks again!
I appreciate your response very much; it’s been quite useful. Of course, now it all makes sense to me! Once again, thank you!