Manually created input validation.

[camohub]

Hi, I have malually created input, with required attr and data-nette-rules. But as I see, LFV did not create span for errors. I dont know why. Input looks like

<input name="products[]" type="text" class="form-control" required data-nette-rules='[{"op":":filled","msg":"Názov je povinná položka."}]'>

If I open brovser debugger there are som changes which comes from LFV. But I dont understant what it means. It looks like

<div class="col-xs-7 col-sm-10 lfv-error-parent">
    <div class="input-group">
        <input name="products[]" type="text" class="form-control" required="" data-nette-rules="[{"op":":filled","msg":"Názov je povinná položka."}]" data-lfv-initialized="true" data-lfv-message-id="_message">
        <span class="input-group-btn">
            <button class="btn btn-primary js-add-new" type="button" data-lfv-initialized="true" data-lfv-message-id="_message_1">+</button>
        </span>
    </div>
    <span id="_message" class=""></span>
    <span id="_message_1"></span>
</div>

It seems that it is ok. But it is not.

[Robyer]

Hi. What does mean manually and what is the problem exactly?

LFV created spans for errors, but because you didn't supplied "id" for your inputs, it used just common id "_message" (for input) and "_message_1" (for button). I recommend you set some id to your input.

And if you created that input element via JavaScript, make sure to call LiveForm.setupHandlers(element); on it.

[camohub]

Manually means - input is written in latte with required, data-nette-rules..., and is not generated by Nette framework. May be something is missing there.

<input name="products[]" type="text" class="form-control" required data-nette-rules='[{"op":":filled","msg":"Názov je povinná položka."}]'>

There is a rule :filled which means the field can not be empty. But it does not work. Other elements generated by framework works fine, but this one does not. It is the same with or without id.

[camohub]

So it seems the problem is in the brackets - [] in the input name. Hmmm what should I do?

[Robyer]

Yes, I realized that too. Problem is with validation of these input arrays. Because it validates the result value - which is array of strings, in this case array of single empty string ([""]) is returned and successfully validated inside the "filled" validator because it is an array containing single string (so it's not null or empty anything).

Now I'm not sure on what place in code it should be fixed. Because it seems even classic netteForms.js couldn't validate it correctly (check it if you can).

[camohub]

Yes Nette also does not allow create text inputs with [] in the name. About 2 years ago I read the code of netteForms.js. It is quite complicate to solve all the situations in the validation. Hope you can do it. May be :filled should not allow [""].

[Robyer]

Oh, 2 years already? I just commited fix, try latest master, please :-)

[Robyer]

And here is working example: https://jsbin.com/kemijofolo/edit?html,js,output

[camohub]

It seems you fixed it. Hope there is no hidden bug. Thanks.