Solved thread

This post is marked as solved. If you think the information contained on this thread must be part of the official documentation, please contribute submitting a pull request to its repository.

Forms "required"

Good Morning everyone,

if I am not mistaken the right way to implement a "required" in html5 is like this:

<input type="text" name="name" size="20" required>

Is there any way to get this done with the Form classes? I am only able to do something like this:

    $this->name = new Element\Text('name', [
        'name',
        'size' => 20,
        'requred' => 'whatever' ...

<input type="text" name="name" size="20" required="whatever">

Which appears to work but is not as clean as I wish it would be.

Best regards Ludwig

edited Dec '16

YOur solution is perfectly fine. I have a BAseForm which generates the form elements based on config passed, the generated code for a "required" field is somethng like this:

$field = new \Phalcon\Forms\Element\Text($name, $options);;
$field->setLabel($label);
$field->addValidators([
    new \Phalcon\Validation\Validator\PresenceOf(['message' => $this->translations->public->forms->requiredField])
]);
$field->setAttribute('required', 'true');
$field->setAttribute('aria-required', 'true');

`

edited Dec '16

Sadly this way it is not valid html.

https://validator.w3.org/nu/#textarea

this is wrong:

<input required="true">

this would be valid:

<input required>

So this is not a big thing at all for sure, but one of my typical quality checks is valid html, which I'd like to achieve.

edited Dec '16

You can do it in Volt directly (using ternary operator).

Or with form render in Volt:

{{ form.render('email', ['class' : 'form-control', 'autofocus' : true, 'required' : true]) }}

But for full HTML5 compliance it needs to be just one word required.

edited Dec '16

But for full HTML5 compliance it needs to be just one word required.

Thats exactly the problem. I dont struggle with setting it required, I want it to be valid HTML and required. So I try to append the single word required to the input field, but seems like this is not possible.

edited Dec '16

@Ludwig, you are correct.

Required, checked, seleceted and other attributes are so called Boolean attributes.

A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

So required="required" is perfectly valid code. Try with this $field->setAttribute('required', 'required'); and you will have valid HTML.

Source: http://w3c.github.io/html/single-page.html#sec-boolean-attributes

After revalidating: Document checking completed. No errors or warnings to show.

edited Dec '16

@Ludwig, you are correct.

Required, checked, seleceted and other attributes are so called Boolean attributes.

A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

So required="required" is perfectly valid code. Try with this $field->setAttribute('required', 'required'); and you will have valid HTML.

Source: http://w3c.github.io/html/single-page.html#sec-boolean-attributes

After revalidating: Document checking completed. No errors or warnings to show.

perfect, thanks for your help :)

edit: due to I accepted my own answer (a missclick) and deleted it afterwards, it seems like I cant accept your answer :/

edited Dec '16

@nikolay-mihaylov good solution!

In my case - Volt syntax:

{{ form.render('email', ['class' : 'form-control', 'autofocus' : true, 'required' : 'required']) }}

will output:

<input id="email" name="email" class="form-control" placeholder="Email" autofocus="1" required="required" type="text">

@jonathan, yeap also works, thanks for showing the other way :)

edited Dec '16

@nikolay-mihaylov: On link you provided, empty string as a an attribute value seems to be 'per standards' still valid:

<label><input type='checkbox' checked name=cheese disabled=""> Cheese</label>

@Jonathan, yes you are right. But the validator somehow does not like the empty quotes. I guess it's either those rules are not fully implemented or it's a bug in the validator :)