Skip Navigation

[Resolved] Display validation errors inside input field with a red border around it

This support ticket is created 8 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Tagged: 

This topic contains 4 replies, has 3 voices.

Last updated by yuri.s 8 years, 1 month ago.

Assisted by: yuri.s.

Author
Posts
#366393

I want to have validation messages for required fields inside the fields instead of under the labels and with a red border around them. How can I achieve that?

#366397

Howdy George, it's nice to hear from you again! I'm not (yet) a CSS ninja but I am working towards becoming the best that I can be to help support my customers!

Thankfully I found a thread in which a customer wanted to change the styling of CRED required fields with CSS, it's over here: https://toolset.com/forums/topic/targeting-cred-required-fields-with-css/

We also have a document explaining how to Style CRED forms over here:
https://toolset.com/documentation/user-guides/styling-cred-forms/

Let me know if this is satisfactory to get you started, I don't have an exact example or the end result you are wanting but I'll do everything I can to help figure this out!

#366499

Hi Ross. I can also easily inspect an element myself and find out the css. My solution needs javascript to change the selectors while the validation happens. So for example the red border around the field would go away after the user starts typing something in there. Basically, I would like to tap to the CRED validation functionality, the function that causes all those messages to be displayed and adjust it so that it changes certain fields' CSS the same way current fields update.

Right now I am using some code to write validation messages on a popup through jQueryUI.

jQuery( "#wpt-form-message" ).dialog({ autoOpen: false });
	var form = $( "#cred_form_4248_1" );
	jQuery( ".wpt-form-submit" ).click(function() {
		if ( form.valid() == false ) {   	
			jQuery( "#wpt-form-message" ).dialog( "option", "title", "Errors found:" );
			jQuery( "#wpt-form-message" ).dialog( "option", "modal", "true" );
            jQuery( "#wpt-form-message" ).dialog( "option", "draggable", false );
			jQuery( "#wpt-form-message" ).html("Please correct highlighted errors and try again!");
			jQuery( "#wpt-form-message" ).dialog( "open");
            jQuery( "#wpt-form-message" ).dialog( "option", "position", { my: "center center", at: "center center", of: window } );
            jQuery( "#wpt-form-message" ).dialog( "option", "show", { effect: "fade", duration: 800 }, "true" );
            jQuery( "#wpt-form-message" ).dialog( "option", "hide", { effect: "fade", duration: 800 }, "true" );
		} else {
            
      		jQuery( "#wpt-form-message" ).dialog( "option", "title", "Form is being sent. Please wait..." );  
       		jQuery( "#wpt-form-message" ).dialog( "option", "modal", "true" );
            jQuery( "#wpt-form-message" ).dialog( "option", "dialogClass", "no-close" );
            jQuery( "#wpt-form-message" ).dialog( "option", "draggable", false );
            jQuery( "#wpt-form-message" ).html("");
            jQuery( "#wpt-form-message" ).dialog( "option", "show", { effect: "fade", duration: 800 }, "true" );
         	jQuery( "#wpt-form-message" ).dialog( "open" );
    		jQuery('#spinner').show();
          
        }
 	}); 

but that's only when the Submit button is pressed.

The CSS code:

.cred-field input[data-wpt-validate *= '"required":{"args":{"1":true}'] {
    border: 1px solid red;
}

indeed target required fields but I want to have the border only to the fields that are empty during the CRED validation process.

Ross, if you are unable to help, I would appreciate redirecting me to someone else please. Recently I am having bad experiences from Toolset support and I am starting to loose my patience.

I hope you understand!

#366569

Hey there George!

I certainly don't want you to have a bad experience with Toolset's support! I have pinged Beda and Lou to take this the moment they are back online as they are very good with jQuery. We try to provide the best effort support when it comes to custom code but this is currently above my head. Sorry for any inconvenience, I'm subscribed to take some more Javascript courses here soon!

#366582

Hi George, I'm sorry to say that there is no way to manipulate CRED's validation messages in the way that you are planning.

A partial solution would be to manipulate the binds in the fields and manually reworking the validation in Javascript. This would require custom coding but that is beyond our support scope. I can only suggest that you use one of our consulting partners to customize how CRED manages these messages.

Regards,
Yuri.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.