Little problem with form validation

[Pub4Game]

How can I disable the check field if it is not filled?

LiveForm.setOptions({
            showValid: true,
            wait: 1500,
            messageErrorClass: 'text-danger',
});

EMAIL form:

$form->addText('email', '')
            ->setType('email')
            ->setRequired('Need email')
            ->setAttribute('placeholder', 'Введите ваш email')
            ->addCondition($form::FILLED)
            ->addRule(Form::EMAIL, 'Nope :)');

Because I get the following

And need

Also... How can I display all the errors, if someone clicks the button "Register" and filled out all the fields?

Thank you, waiting for an answer!

[Robyer]

Commited - https://github.com/Robyer/nette-live-form-validation/commit/35a033326e90b05e88d5508c30de8cb2b26c1f63

And about your last question I don't understand what do you want to achieve exactly..

[Pub4Game]

Thank you very much!

For example, I went to the registration page and just clicked on the "Sign up" (Not filled field). It is necessary that all fields became red.

[Robyer]

Do you mean this option? It is enabled by default and works for me:

showAllErrors - show all errors when submitting form; or use "false" to show only first error

[Pub4Game]

Strangely, even after your fixes I get a valid empty fields

Yes. I don't getthe errors..

[Pub4Game]

Maybe because I use addCondition($form::FILLED) ? How can I make a field that was checked only when the field is filled with symbols?

[Robyer]

Show me your form here so I can see the problems directly.

https://jsbin.com/qojixibule/edit?html,js,output

[Pub4Game]

I don't really understand what you want... Look, I did right?

https://jsbin.com/pidukoqova/edit?output

[Robyer]

Yes, that's what I wanted. You have (at least) 2 problems there:

1) From looking at JavaScript console you can see that it throws exception when parsing some json, after further digging you can see that it is problem with your "username" input's rules.

[{"op":":filled","rules":[{"op":":filled","msg":"Please, enter login"},{"op":":minLength","msg":"Login must be longer than 4 characters","arg":4},{"op":":maxLength","msg":"
Login should be no longer than 15 characters","arg":15}],"control":"username"}]

Problem is that you have new line right "msg":<HERE>Login should be. So then the whole script stops working. When you fix it (removing the new line from message), you will see that script starts validating your form correctly.

2) Your form works exactly like you defined it. It doesn't show errors when submitting form without filling any input because you set it that way. You probably have (as I also saw in your deleted comment) addText(...)->addCondition(FILLED)->setRequired()->addRule(...) which means If input is filled (and only if it is filled), then check the rules. Just remove the addCondition(Form::FILLED) at the start and it will work as expected.

[Robyer]

Here is working example: https://jsbin.com/pidukoqova/edit?html,js,output

Also you probably want to have setRequired() on the checkbox too.

[Pub4Game]

But if I remove the addCondition(Form::FILLED), then the field will be checked even when not filled.

It looks very pathetic when a person clicks on the field, and then in another place and the field becomes red.

You can add an option to disable the form validation on click If the field is empty?

[Pub4Game]

https://youtu.be/KOD3eiE0F5w

I think it will be easier to explain.

I need if the field is empty, it has not been checked

[Robyer]

What are you talking about? Think about it this way:

a) Is the input required to be filled? If yes, then remove addCondition() and keep only setRequired() (and addRule()). b) Isn't the input required to be filled? Then you can successfully submit the form without writing anything in the input. So, when you submit empty form, it will be submitted successfully without error messages.

Also, if person clicks out of some required field, only then this certain input will become red. Not any other field in another place, only the input user worked with.

EDIT: Regarding your video - is "empty" value of that input valid value? Is it valid to submit that input as empty? If the input must be filled, then it is correct to notify the user, that the input, he just skipped filling is required, and that he need to fill it.

[Pub4Game]

Okay, thank you.