[Gelöst] Error message in Cred forms

[Author]

Artikel

[Pat]

Hello,

Currently, when an error is detected in a Cred (wrong data type for example), a message is display inside the field (ie : inside the li for radio fields for example).

Would it be possible not to display a message, but put te field in red (meaning, the box and field label).

I know also there is still a bug for the global error message (https://toolset.com/forums/topic/cred_field-fieldform_messages-does-not-display-anything/page/2/), but here, I'm only speaking of the single error message that is displayed for a single field.

Regards
Pat

[Christian Cox]

Hi Pat,
You can use CSS to do some of this. You can hide the error message label element, and use a CSS sibling selector to style the sibling input. For example:

.wpt-form-error {
  display: none;
}

.wpt-form-error + input[type=text] {
    border: 1px solid red;
}

[Pat]

Hi Christian,

That could be a good solution, but the issue is that the error message is integrated in a label inside a li (for radio types for example).
What I would like is to border the parent li with red in case of error message.

So, I tried to do it thanks to jquery with this :

$(".wpt-form-error").parents('li').css("border", "1px solid red !important");

But this is not working neither. Any idea?

Another point : I have another image field I have placed as "required". When I look at the result, this field has no label.wpt-form-error
Is it normal and how can we display the error message on image fields?

Regards
Pat

[Christian Cox]

Pat, can you please provide the generated markup of all the elements you want to style? Please include the input field.

[Pat]

Hi Christian,

Here is the code :

<label class="cred-label cc-selector">
Type de bateau <span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
</label>
<div class="cc-selector">
<div class="js-wpt-field-items form-group js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="radios-wpcf-type-de-bateau">

<ul class="wpt-form-set wpt-form-set-radios wpt-form-set-radios-wpcf-type-de-bateau">

<li class="wpt-form-item wpt-form-item-radio radio-bateau-a-moteur">
<input type="radio" id="form-1337284453" name="wpcf-type-de-bateau" value="Bateau à moteur" data-wpt-validate="{"required":{"args":{"1":true},"message":"Ce champ est obligatoire"}}" data-wpt-field-title="Type de bateau" class="wpt-form-radio form-radio" data-wpt-type="radio" data-wpt-id="cred_form_71_0_form-1337284453" data-wpt-name="wpcf-type-de-bateau" /><label class="wpt-form-label wpt-form-radio-label control-label" for="form-1337284453">Bateau à moteur</label>

<li class="wpt-form-item wpt-form-item-radio radio-voilier">
<input type="radio" id="form-23707365" name="wpcf-type-de-bateau" value="Voilier" data-wpt-validate="{"required":{"args":{"1":true},"message":"Ce champ est obligatoire"}}" data-wpt-field-title="Type de bateau" class="wpt-form-radio form-radio" data-wpt-type="radio" data-wpt-id="cred_form_71_0_form-23707365" data-wpt-name="wpcf-type-de-bateau" /><label class="wpt-form-label wpt-form-radio-label control-label" for="form-23707365">Voilier</label>

<li class="wpt-form-item wpt-form-item-radio radio-semi-rigide">
<input type="radio" id="form-403649489" name="wpcf-type-de-bateau" value="Semi-rigide" data-wpt-validate="{"required":{"args":{"1":true},"message":"Ce champ est obligatoire"}}" data-wpt-field-title="Type de bateau" class="wpt-form-radio form-radio" data-wpt-type="radio" data-wpt-id="cred_form_71_0_form-403649489" data-wpt-name="wpcf-type-de-bateau" /><label class="wpt-form-label wpt-form-radio-label control-label" for="form-403649489">Semi-rigide</label>

<li class="wpt-form-item wpt-form-item-radio radio-multi-coque">
<input type="radio" id="form-157947578" name="wpcf-type-de-bateau" value="Multi-coque" data-wpt-validate="{"required":{"args":{"1":true},"message":"Ce champ est obligatoire"}}" data-wpt-field-title="Type de bateau" class="wpt-form-radio form-radio" data-wpt-type="radio" data-wpt-id="cred_form_71_0_form-157947578" data-wpt-name="wpcf-type-de-bateau" /><label class="wpt-form-label wpt-form-radio-label control-label" for="form-157947578">Multi-coque</label>

</div>
</div>

So, the field "wpcf-type-de-bateau" is defined as required. If no input, then, the error message is integrated into the first li. To me, that would be better to have it at the ul level for example (as it is a global radio field and we need one choice, not specially the first one).

Regards
Pat

[Christian Cox]

This markup does not include any elements with the class 'wpt-form-error' so I'm not sure how the jQuery is failing.

$(".wpt-form-error").parents('li').css("border", "1px solid red !important");
Where are you placing this jQuery code? When is it executed?

[Pat]

Hi Christian,

Strange in fact. Jquery is working fine (no error reported in the console), but only the 2 first required fields are highlighted in red and not the others?

I'm using the Création bateau (ID: 71) Cred post form.
The global form error message does not neither (placed in the beginning of the form) :
<label id="wpt-form-message-71" data-message-single="La publication n\'a pas été sauvegardée à cause du problème suivant :" data-message-plural="La publication n\'a pas été sauvegardée à cause des problèmes %NN suivants :" style="display:none;" class="wpt-top-form-error wpt-form-error"></label>

but with a style : display:none; !

Any idea?
Regards
Pat

[Christian Cox]

I didn't understand your answer, sorry! Let me repeat the questions:

$(".wpt-form-error").parents('li').css("border", "1px solid red !important");
- Where are you placing this jQuery code?
- When is it executed?

[Pat]

Ooopppss sorry Christian,

In fact, I have looked around and this is not a good code for that. So, I have deleted it.
The current issue is that currently, only some error messages are displayed and not the others !

What I would like is to have the same way of displaying error message, ie like a text input when you have it just before the input (see the screenshot), even for radio or checkboxes

Regards
Pat

[Christian Cox]

Hi Pat,
I'm still not clear how to replicate the problem. It appears that the checkbox for "Validation des CGV*" displays an error message if I submit the form without checking the box. I'm attaching a screenshot.

Which error message is not displaying? How can I replicate the error?

[Pat]

Hi Christian,
You're right, but it's a simple checkbox (and not checboxes or radio).
I think it could be easier for you to look at the page creation-bateau/
You have different types of fields that are required (especially "Type de bateau" in the top).

Let me know
Regards
Pat

[Christian Cox]

Radio buttons can have error messages, but I don't see the radio button you are describing for "Type de bateau" at the top. Are we talking about locboats.com/creation-bateau? I see some text links at the bottom, but no radio buttons.