FrontendForms - A module for creating and validating forms on the frontend

[Juergen]

Hello @Andy

  On 1/31/2025 at 3:54 PM, Andy said:

Is there any way to tell the form that it is invalid? And make $form->isValid() = false.

Expand  

I will take your issue as an idea for a new feature and I will take a look if I could find a good working solution. At the moment I will wait if there are some unwanted negative side effects concerning the last update. If everything works as expected and no issues occur/will be reported I will go on to the next step and try to find a solution to your issue.

Best regards

[Juergen]

Good news @Andy

I have taken a look at the Valitron library, which I use to validate form fields and this library offers an easy to use solution to add custom rules. Take a look here.

To add a custom rule to ProcessWire you need to add it to the site/init.php. For demonstration puroses I use the example from the Valitron docs. So please add this code (which always returns false) to your site/init.php

\Valitron\Validator::addRule('alwaysFail', function($field, $value, array $params, array $fields) {
    // here you can write your validation code - this should return true or false
    return false;
}, 'Everything you enter is not correct. You fail.');

Now you have added a new custom rule, which you can use sitewide like all other validation rules.

Here is a form example containing this rule:

$form = new \FrontendForms\Form('test');

$inputText = new \FrontendForms\InputText('text');
$inputText->setLabel('Input Text');
$inputText->setRule('required');
$inputText->setRule('alwaysFail'); // here is the new validation rule
$form->add($inputText);

$button = new \FrontendForms\Button('submit');
$button->setAttribute('value', 'Send');
$form->add($button);

if ($form->isValid()) {

}

echo $form->render();

If you validate the form, you will always get the error message "Everything you enter is not correct. You fail." because this rule always returns false.

You can take this example as a starting point for your own validation rule. The validation code must return a boolean value (true or false).

Hope this helps

[Andy]

Hi @Juergen

I continue to admire you. Yes, that's exactly what I meant. That's what I was thinking about writing a new validation rule, just haven't decided how to do it yet. I was going to use hooks. You've shown a logical solution. Thank you.

I think FrontendForms users can share their useful validation rules in this thread.

[Juergen]

Hello @Andy

I will write a new section in the docs in the next time about this possibility.

Please note:

If you want to use API variables inside your custom validation rule I guess you need to add this rule to the site/ready.php instead of the site/init.php. I have not tested it, but I guess you need to do it this way, but you can try it out.

  On 2/1/2025 at 11:32 AM, Andy said:

I think FrontendForms users can share their useful validation rules in this thread.

Expand  

That is a good idea and if a validation rule seems to be useful for others I will add it to the FrontendForms validation rules file, so everyone can use it. I guess there are around 60 validation rules available at the moment, but more is more in this case. 😉

[PWaddict]

  On 2/1/2025 at 9:52 AM, Juergen said:

 

$wire->addHookAfter('Errormessage::render', function(HookEvent $event) {
    $msg = $event->object;
    $errorText = $msg->getText();
    if($errorText){
        $fontAwesome = '⚠ ';
        $event->return = $fontAwesome.$errorText;
    }
});

Expand  

Thank you @Juergen

You accidentaly placed the old Hooking example 2 on the docs which now the font awesome icon displayed always even if there are no errors. Replace it with the above hook which works properly.

[Andy]

  On 1/31/2025 at 9:04 PM, kongondo said:

Moderator note

Not sure what happened there. However, the post was blank so I deleted it.

Expand  

The posts are frozen in the red zone again. Maybe some kind of restriction has been violated?

[Andy]

Hi @Juergen

Good news everybody. Custom validation rules work. I'll add one more proven validation rule to the general collection.

Check to enter a Cyrillic first, last or middle name.

In ready.php

//
// Cyrillic name may contain lowercase and uppercase а-я and hyphen
//
\Valitron\Validator::addRule('cyrillicName', function ($field, $value) {
    $regex = '/[^а-яё\-]/iu';
    if (!preg_match($regex, $value)) {
        return true;
    }
    return false;
},'contains not allowed characters. Cyrillic name may contain lowercase and uppercase а-я and hyphen (no whitespaces).');

 

[Juergen]

Thank you @PWaddict

  On 2/1/2025 at 12:27 PM, PWaddict said:

You accidentaly placed the old Hooking example 2 on the docs which now the font awesome icon displayed always even if there are no errors.

Expand  

I have corrected in inside the docs.

[Juergen]

Hello @Andy

Glad that it works like you want!!

  On 2/1/2025 at 1:05 PM, Andy said:

Check to enter a Cyrillic first, last or middle name.

Expand  

For this check, it is not really necessary to write a custom rule. You can also use the regex validation rule and add the regex there, but it is not wrong if you need this validation rule often.😉

[Andy]

Hi @Juergen

Thanks for the information. I will read the Valitron documentation more carefully.

However, I need this rule quite often. I think that adding the 'cyrillicName' rule is more correct for the code.

Thanx

[Juergen]

Hello @Andy

I have added your rule as the first community provided validation rule to FrontendForms. Take a look here.

This validation rule is included in the next update, but if you do not want to wait until the next update, you only have to replace the code of the CustomRules.php from Github with yours and you are done.

[Andy]

Hi @Juergen

Got the ability to make flexible rules and a multi-step input form. The ability to make your own validation rules is a very powerful thing.

Thanks.

Edited February 2 by Andy

[Frank Vèssia]

hi. I'm getting this jqueyr error at fronendforms.js

 if ($("button.statistics").size() > 0) {

size is not a function

shouldn't be .length() ?

[Juergen]

Hello @Frank Vèssia

Thanks for reporting this issue. Unfortunately I cannot reproduce this error in my console.

size() and length should return the same. Take a look at this discussion. Could you please replace the size() function with length to see if the error is gone now. If so, I can replace it on Github too, because it should not have a negative side effect.

Thanks Jürgen

[Juergen]

Hello @Frank Vèssia! I have replaced size() function with length attribute on Github.

[dotnetic]

Hello @Juergen the settings for a custom framework are not working correctly. I am using FrontendForms v2.2.28.

I have a tailwindcss.json file in site/assets/files/FrontendForms/frameworks.

The Tailwindcss option appears in the Output rendering select field.

But when I select it, the output on the frontend uses default classes instead of my tailwind classes.

Even if I enter the custom path "site/assets/files/FrontendForms/frameworks" in the corressponding settings field, it doesn't work.

If I copy my tailwindcss.json file to site/modules/FrontendForms/CSSClasses it works.

Maybe you could look into this issue?

Another hint: It would be good to rename the module to .module.php so it get's correct syntax highlighting, and enables static analyzers or Rector to recognize the file. This is also the recommended way of custom modules (don't know where this is mentioned, but I remember reading it).

Regards, Jens

[Juergen]

 

  On 2/18/2025 at 8:38 AM, dotnetic said:

But when I select it, the output on the frontend uses default classes instead of my tailwind classes.

Expand  

Problem is solved in latest version 2.2.29

[PWaddict]

Hey @Juergen I need to make the checkbox field look like this:

<div class="uk-grid-small" uk-grid>
  <div class="uk-width-auto">
    <input id="checkbox" class="uk-checkbox" type="checkbox">
  </div>
  <div class="uk-width-expand">
    <label for="checkbox">Checkbox Label</label>
  </div>
</div>

But it's not possible (I think) without first use the method $form->appendLabelOnCheckboxes(true); but it seems it doesn't do anything at all.

[Juergen]

Hello @PWaddict

You are absolutely right - the position change will not taken into account. I have fixed this now. Please replace the following file:

https://github.com/juergenweb/FrontendForms/blob/main/Formelements/Inputelements/Inputfields.php

After that the position change should work, but please give me a feedback if everything works now as expected. After that I will bump up the version of FrontendForms.

To get the desired markup, you have to do something like this:

$form = new \FrontendForms\Form('inputfieldtest');
$form->setMinTime(0);
$form->setMaxTime(0);
$form->setMaxAttempts(0);
$form->setErrorMsg('Ouups! There are some errors.');
$form->setSuccessMsg('Congratulation! There are no errors.');
$form->appendLabelOnCheckboxes(true); // set it here to true or in the backend config


// add checkbox
$checkbox = new \FrontendForms\InputCheckbox("checkbox");
$checkbox->setLabel("Checkbox Label");
$checkbox->getFieldWrapper()->setAttribute('class', 'uk-grid-small');
$checkbox->prepend('<div class="uk-width-auto">'); // add div before the input
$checkbox->append('</div>'); // add closing div after the input
$checkbox->getLabel()->removeAttribute('class')->wrap()->setAttribute('class', 'uk-width-expand'); // wrap the label element
$form->add($checkbox);

$button = new \FrontendForms\Button('submit');
$button->setAttribute('value', 'Send');
$form->add($button);


if($form->isValid()){


    print_r($form->getValues());
    // do what you want

}

// render the form
echo $form->render();

Take a look at the checkbox element. I have done some manipulations to add some classes and extra divs. I guess you are using the UIKit markup and if so, I think you also have to add the data-uk-grid attribute to the form if you are using grids (but not sure).

I think you can image how it could be done to get the desired markup at all. If you have problems, please post the complete code for the form .

Best regards

[PWaddict]

Thank you @Juergen Here is the final code in case anyone wants to use the grid (UIkit) on a checkbox:

$checkbox = new \FrontendForms\InputCheckbox('checkbox');
$checkbox->setLabel('My Checkbox Label');
$checkbox->setRule('required')->setCustomMessage('My custom required text');
$checkbox->getErrorMessage()->setAttribute('class','uk-width-1-1'); // Add uk-width-1-1 to prevent the text displayed as part of the grid
$checkbox->getFieldWrapper()->setAttributes(['data-uk-grid', 'class' => 'uk-grid-small']);
$checkbox->prepend('<div class="uk-width-auto">');
$checkbox->append('</div>');
$checkbox->getLabel()->wrap()->setAttribute('class', 'uk-width-expand');
$form->add($checkbox);

 

[Juergen]

Hello @PWaddict

Instead of using a Hook for adding the grid class to the error message, you can also use the following:

$checkbox->getErrorMessage()->setAttribute('class', 'uk-width-1-1');

Best regards

[PWaddict]

  On 3/23/2025 at 6:28 PM, Juergen said:

Hello @PWaddict

Instead of using a Hook for adding the grid class to the error message, you can also use the following:

$checkbox->getErrorMessage()->setAttribute('class', 'uk-width-1-1');

Best regards

Expand  

Much better. Thanks. I missed that from the docs.

[Juergen]

Take a look at the form field class file (https://github.com/juergenweb/FrontendForms/blob/main/Formelements/Inputelements/Inputfields.php).

There you can see that an inputfield consists of various parts (wrappers, label, error message, success message, description, notes,..)

Every element can be grabed an manipulated via a get....() function

• getLabel()
• getErrorMessage()
• getSuccessMessage()
• getDescription()
• getNotes()
• getInputWrapper()
• getFieldWrapper()

Maybe this is not well documented inside the docs, but now you know it 😉

[PWaddict]

  On 3/23/2025 at 6:28 PM, Juergen said:

Hello @PWaddict

Instead of using a Hook for adding the grid class to the error message, you can also use the following:

$checkbox->getErrorMessage()->setAttribute('class', 'uk-width-1-1');

Best regards

Expand  

Sorry, but this seems that it doesn't work. No class added.

[Juergen]

Are you sure? I have tested it on my site and it works as expected:

$checkbox = new \FrontendForms\InputCheckbox('checkbox');
$checkbox->setLabel('My Checkbox Label');
$checkbox->setRule('required')->setCustomMessage('My custom required text');
$checkbox->getFieldWrapper()->setAttributes(['data-uk-grid', 'class' => 'uk-grid-small']);
$checkbox->prepend('<div class="uk-width-auto">');
$checkbox->append('</div>');
$checkbox->getLabel()->wrap()->setAttribute('class', 'uk-width-expand');
$checkbox->getErrorMessage()->setAttribute('class', 'uk-width-1-1');
$form->add($checkbox);

Do you have removed the hook?