Alert-level warning for inputfields

[Toutouwai]

Short description of the enhancement

I think it would be useful if there was a status below that of "required" that could be given to inputfields. So this status would produce an alert similar to the one that occurs when a required inputfield is left blank (message in system notices and within inputfield), with the differences being a lower level of intensity (e.g. an orange notice rather than red) and the alert would not prevent the publishing of pages.

Also, it would be possible to conditionally set the alert status and message in a hook, so there could be some logic applied. So you could give some notice like: "You have added a sponsor logo but no link URL. It is recommended provide a link URL for each sponsor logo."

I am already doing this with inputfield render hooks and custom CSS, but thought it would be a nice feature to have in the core.

[szabeszg]

"I am already doing this with inputfield render hooks and custom CSS, but thought it would be a nice feature to have in the core."

Could you please provide an example for simple Textarea? It would be great to be able not to enforce minimum/maximum length, instead I need the warning only.

And yeah I agree, general support for such things would be very useful indeed.

[Toutouwai]

Could you please provide an example for simple Textarea?

$wire->addHookAfter('InputfieldTextarea::render', function(HookEvent $event) {
    $inputfield = $event->object;
    $out = $event->return;
    if($inputfield->hasField != 'your_textarea') return;
    if(strlen($inputfield->value) > 300) {
        $alert_text = "The length of this field is greater than 300 characters.";
        $event->return = "<p class='inputfield-alert'>$alert_text</p>" . $out;
    }
});

Then add some custom CSS to style .inputfield-alert.

[szabeszg]

Works great, thank you for saving some time for me! I adjusted it to my needs:

//...
if (strlen($inputfield->value) > 150 || strlen($inputfield->value) < 50) {
	$alert_text = "WARNING: Number of characters is NOT between 50 and 150!";
	$event->return = "<p class='site-inputfield-alert'><b>$alert_text</b></p>" . $out;
}
//...

Turned the "message" into red:
.site-inputfield-alert { color: red; line-height: 1.2em; }

And added this one to the Note property of the field:
Number of characters should be between 50 and 150!

I think it is hard to miss it with this setup, especially that the field is on the top of the page, which is crucial as the "message" only appears after saving the page and that is why a core support with realtime JS checking would be better so that fields not in the viewport are handled "properly".

[szabeszg]

"..realtime JS checking..."
Well, at least in the simple case of the Textarea, the character counter displays a red "message" next to the counter like (150 max) but that's all. We could do with more :)