KT Walrus Posted July 1, 2019 Posted July 1, 2019 I working on a custom sign up form for my site. I basically copied the form out of register.php and implemented a hook to provide my own fields. But the resulting form displays "This field is required" sometimes prefixed with an icon and sometimes not. I suppose that the fields validated by JavaScript are putting out an icon and the PHP validated fields are omitting the icon. How to I make all these messages look the same? Can you fix the core JS and PHP to make them the same, or am I going to have to develop a hook to make them consistent on my site? Here is a screenshot of my current Sign Up form:
newbie LAC Posted July 2, 2019 Posted July 2, 2019 19 hours ago, KT Walrus said: But the resulting form displays "This field is required" sometimes prefixed with an icon Only 4 fields convertExistingErrors: function () { var fields = this.scope.find('#elInput_username, #elInput_email_address, #elInput_password, #elInput_password_confirm'); 19 hours ago, KT Walrus said: How to I make all these messages look the same? Use css Remove [data-role="registerForm"] [data-role="validationCheck"] .fa-times-circle { display: none; } Add [data-role="registerForm"] .ipsFieldRow_error .ipsType_warning:before { content: "\f057"; font: normal normal normal 14px/1 FontAwesome; }
KT Walrus Posted July 2, 2019 Author Posted July 2, 2019 Thanks @newbie LAC I'll try this today and see if I can make it work for my site.
KT Walrus Posted July 2, 2019 Author Posted July 2, 2019 2 hours ago, newbie LAC said: Remove [data-role="registerForm"] [data-role="validationCheck"] .fa-times-circle { display: none; } Add [data-role="registerForm"] .ipsFieldRow_error .ipsType_warning:before { content: "\f057"; font: normal normal normal 14px/1 FontAwesome; } This didn't quite work for me since the new fields weren't wrapped in .ipsFieldRow_error for some unknown reasons. So, I decided to go with just suppressing the .fa-times-circle altogether and add some extra styling to the .ipsType_warning elements. Here is my new custom CSS: [data-role="registerForm"] [data-role="validationCheck"] .fa-times-circle { display: none; } [data-role="registerForm"] .ipsFieldRow_content .ipsType_warning { display: inline-block; margin-top: 7px; } And here is the new screenshot: I still need to figure out how to suppress much of the ugly vertical space between the checkboxes and the warning text to make the form look consistent.
Recommended Posts
Archived
This topic is now archived and is closed to further replies.