How to fix inconsistent error messages in my sign up form?

[KT Walrus]

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]

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]

Thanks @newbie LAC 

I'll try this today and see if I can make it work for my site.

 

[KT Walrus]

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.