Inputfield - issue with require attribute and front end validation

[chrizz 59]

I am currently experimenting with a form which required specific fields. I want to have front-end (via JS) and backend validation (via PW built-in) but I am struggeling with the "required" attribute. 

• In order to use form.checkValidity(), inputfields need "required='required'" as attribute
• To make use of the PW validation, the field has to be initialized with $field->required = true;

This makes the input field look like this

$field = $this->modules->get("InputfieldText");
$field->label = "test";
$field->attr("id+name", "test");
$field->attr("type", "number");
$field->attr("step", "0.001");
$field->attr("placeholder", "placeholder");
$field->attr("required", true);
$field->required = 1;
$form->add($field);

For some reason the results are not the desired ones and I have no clue how this could be solved. 

 

The above results in the following output

<input id="test" class="required InputfieldMaxWidth" name="test" type="number" maxlength="2048" placeholder="placeholder" step="0.001">

Backend validation will work, but frontend validation fails because of the missing "required" attribute

 

Removing the line $field->required = 1, make it look like this

<input id="test" class="InputfieldMaxWidth" name="test" type="number" maxlength="2048" placeholder="placeholder" step="0.001" required="required">

Now the frontend validation works, but the backend validation fails (obviously because the "required" class is missing. 

 

Actually I am wondering why the build-in "required" results in a CSS class, rather than in the attribute and why an additional attribute and the class collides. 

And because I am pretty sure that I am not the first one struggling with this, any hints are much appreciated 🙂 

Thanks!

[MoritzLost 821]

Inputfields have two separate settings for setting the required flag for backend validation, and including the required attribute in the HTML output. In a regular text field settings, there are two settings for making a field required and including the required attribute in the frontend as well.

For API usage: $field->required controls the backend validation, the HTML attribute can be added with $field->requiredAttr. So this should work:

// make the field required for backend validation
$field->required = true;

// include the required attribute in the HTML output
$field->requiredAttr = true;

Though I have used this in different contexts to varying degrees of success. Might also try to force the attribute with $field->attr('required', 'required').

[chrizz 59]

that was exactly what I was looking for. I wasn't aware of the requiredAttr. Works like charm 🙂 Thanks 

[fliwire 9]

via hook:
 

$wire->addHookBefore('Inputfield::render', function (HookEvent $event) {
    $inputfield = $event->object;
    $page = wire("page");

    if ($page->template == 'admin') return;

    if ($inputfield->required) $inputfield->requiredAttr = 1;
});