Jump to content
chrizz

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;
$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!

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
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;
});

 

Share this post


Link to post
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...