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!