Forms created with panx-framework using FormX class are easily validatable. All forms should be located in /app/forms/
and should extend the Form located. Example form:
<?php
class LoginForm extends Form {
protected $form;
public function __construct($formName = "LoginForm", $dir = null) {
$this->formName = $formName;
$this->dir = $dir;
$this->form = new FormX("POST", "/login/verify/");
$this->form->add('input', 'username')
->placeholder("Type your username")
->type("text")
->html("class='input' autofocus")
->required(true)
->errorMsgEmpty("Prosím, zadejte uživatelské jméno")
->errorMsgNotValid("Zadané uživatelské jméno je neplatné - %s musí obsahovat minimálně 4 znaky.")
->validator("Validator", "validateUsername")
->validatorRegex("[A-Za-z]{4,}");
$this->form->add('input', 'password')
->placeholder("Type your password")
->type("password")
->html("class='input'")
->required(true)
->errorMsgEmpty("Prosím, zadejte heslo")
->errorMsgNotValid("Zadané heslo je neplatné - %s musí obsahovat minimálně 6 znaků.")
->validator("Validator", "validatePassword")
->validatorRegex(".{6,}");
$this->form->add('input', 'info')
->placeholder("Type info bout you")
->type("text")
->html("class='input'")
->default("18 yo");
$this->form->add('input', 'files[]', 'files')
->placeholder("Select files")
->type("file")
->html("class='input' multiple")
->required(true)
->errorMsgEmpty("Prosím, zvolte soubor")
->errorMsgNotValid("Zvolené soubory nejsou validní - %s.")
->fileSize("100000000")
->fileCount("5")
->fileExtensions("png, jpg");
$this->form->add('submit', 'submit')
->text('Login')
->id('submit')
->html('class="button"');
}
}
Then the Latte template file (You should name that same as you form, in our case LoginForm.latte):
<form method={$form->method}>
{csrf}
{input username}
{input password}
{input info}
{input files[]}
<button {$form->submit->html|noescape} id="{$form->submit->id}" name="submit">
{$form->submit->text}
</button>
</form>
{if $form->errorMsg}
{$form->errorMsg}
{/if}
And that is! You have just created form, now you can use the form in other latte file using form macro ({form LoginForm}
).
The form validation is easy, just call the validate() function on the form, e.g.:
$f = new LoginForm();
dump($f->validate()); // returns boolean
You can obtain the values by using method getValues(), just keep in mind, that this function will not validate the form, so you need check if its valid using the validate() and then you should obtain the values
$f = new LoginForm();
dump($f->getValues()); // returns array
If the user have submitted form with invalid data, then you can access the invalid input name using error() method, which returns array with [0] => error type (ERROR_REQUIRED / ERROR_NOT_VALID), [1] => element name
You can render the form using render() method, e.g.:
<?php
$f = new LoginForm();
$f->render();
If you do not have Latte, then you can of course render without it, for example manual render of LoginForm:
<form method="<?=$form->method?>" action="<?=$form->action?>">
<input name="<?=$form->csrf_token->name?>" type="<?=$form->csrf_token->type?>" required value="<?=$form->csrf_token->value?>">
<input name="<?=$form->username->name?>" type="<?=$form->username->type?>" placeholder="<?=$form->username->placeholder?>" <?=$form->username->html?> <?=($form->username->required ? "required" : "")?>>
<input name="<?=$form->password->name?>" type="<?=$form->password->type?>" placeholder="<?=$form->password->placeholder?>" <?=$form->password->html?> <?=($form->password->required ? "required" : "")?>>
<input name="<?=$form->info->name?>" type="<?=$form->info->type?>" placeholder="<?=$form->info->placeholder?>" <?=$form->info->html?>>
<button <?=$form->submit->html?> id="<?=$form->submit->id?>" name="submit">
<?=$form->submit->text?>
</button>
</form>
But manual rendering is quite hard and takes a lot of time so you should try to avoid it.
To add element to the form, you need to use method add(string $type, string $name, string $files=null): FormXElement
, where $type
is the html type (e.g. input, button - Used in rendering), $name
is the name="" attribute and $files
is for multi file upload, where the name contains "[]". The add() method returns FormXElement object, which have many methods, so you can additionally set more information about the element.
List of available methods:
Forms are also validated on client side (if you render them using latte, otherwise you need to include /res/js/FormX.js
file in your code). It use data-formx- attributes.