How to change Form Validation

Hi Kossahl,

That is correct, in the new version we’ve migrated over to HTML5 form validation to move things forward with web standards. If you’d like to learn more how that is used, feel free to read through the following article: https://www.sitepoint.com/html5-form-validation/

In regards to styling the validation messages, there is no easy way built into the plugin to style the them at the moment.

However, you can still go about styling them in your own unique way. I came across this helpful article in my searches: https://developer.telerik.com/featured/building-html5-form-validation-bubble-replacements/

Using CSS3 you should have no issues suppressing the default validation bubbles and creating your own to style however you see fit for your site.

Thanks,
Evan

Hey Evan,

thanks for your anwser.
Meanwhile I figured everything out but I still have two recommendations/wishes:

1. The default international-phone-pattern [0-9] is really a bit two restrictive as it will only allow one! digit. Maybe you should go with something like [0-9]{1,} so that the telephone field will work in a meaningfull way by default. Of cause I used the filter to change that pattern but still the default makes no sense at all to me.

2. I’m really missing a css class for labels of required fields. Allthough required inputs can be adressed via css this is not possible for the labels (to my knowledge) as the span now comes before the input.

By the way, as the change in validation to me really was a big change maybe you should mention it in your “Upgrading to Version 6 – Changes from Version 5.4.4” article. This would have saved me a lot of time.

Thanks Again
BJ

Hi BJ,

Thank you for the last suggestion. I will add it to the article today.

Thank you!
-Tracy

Hi BJ,

I just now pushed out a v6.0.2.4 release which actually enhances a few of the features you mentioned.

From now on the international phone regex pattern defaults to [0-9]{1,}. The filter is still applicable if you need to alter it in anyway.

In regards to the classes on required field labels, I’ve gone ahead and added two new classes to the form labels. The first one is global and will appear on all forms depending on the merge tag of the form field. .EMAIL-label, is the label of the Email field and so on.

The additional helper class that should come in handy for you is .yikes-mailchimp-field-required, which applys to all labels on form fields that are set to required. You should now be able to easily style the spans using:

.yikes-mailchimp-field-required span {
  /* styles here */
}

We’ve also enhanced a few other features so you might want to check the changelog for a full list.

Thanks again,
Evan

Thanks everybody, awesome support!