Jump to content

Inputfield - issue with require attribute and front end validation


Recommended Posts

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;

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 ? 


Link to comment
Share on other sites

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').

  • Thanks 1
Link to comment
Share on other sites

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;


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...