Required Fields

[danielcorrea]

Hello, before any comment I want to thank for the great plugin. It has helped me a lot. I wonder if I'm doing something wrong or the plugin is incompatible with required fields. It turns out that when a mandatory field is not visible, it is soon empty, it is not possible to submit a form. Is that right or am I doing something wrong?

`

Órgão expedidor/UF

                            </div>`

[rguliev]

Hi Daniel! I'm glad you find it helpful:) Well, it's a big issue which has happened to me too. The problem is that the required attribute must be toggled too. As a workaround, in the coming version (maybe this or next week), you will be able to add a custom event handler. So, it will be possible to manually toggle the required attribute. But I agree that it would be better to support required fields in a convenient way. I will keep this issue open until I find something. Thank you for a good question)

[rguliev]

Well, I just updated it. I need some time to write the docs. But you can use it already. See some examples here For your case, you can try something like:

<div class="col-sm-2 conditional-custom" data-condition="#paisNascimento === 'Brasil'">
    <div class="form-group">
        <label class="control-label" for="orgaoExpedidor">Órgão expedidor/UF</label>
        <input id="orgaoExpedidor" name="orgaoExpedidor" type="text" class="form-control" required> 
     </div>
</div>

<script>
$(".conditional-custom").conditionize({
    ifTrue: ["show", function($section) {$("#orgaoExpedidor").attr("required", true);}],
    ifFalse: ["hide", "clearFields", function($section) {$("#orgaoExpedidor").attr("required", false);}]
});
</script>

[rguliev]

Hi @danielcorrea , Finally, I updated the docs (see the README file). Hope it helps.

[danielcorrea]

One year later... Probably something has changed for the better, but even following your tip, I still have problems with mandatory fields. See my code and help me find my error ...

My Section <div class="conditional col-sm-6 offset-2" id="repetir_semanalmente" data-condition="#repetir === 'semanalmente'">

My Input <label class="control-label" for="repetir_semanalmente_ate_o_dia">Até o dia</label> <input type="date" class="form-control" name="repetir_semanalmente_ate_o_dia" id="repetir_semanalmente_ate_o_dia" value="$data" required/>

My JS $("#repetir_semanalmente").conditionize({ ifTrue: ["show", function ($section) { $("#repetir_semanalmente_ate_o_dia").attr("required", true); }], ifFalse: ["hide", "clearFields", function ($section) { $("#repetir_semanalmente_ate_o_dia").attr("required", false); }] });

Any suggestion?

Thanks again for your code and help

[rguliev]

I tried out your code and it worked. Could it be that your issue is caused by the initial code? Did you try to remove required from #repetir_semanalmente_ate_o_dia in the initial code?

P.S. You don't need class conditional for your section because you reference it by id.

[danielcorrea]

Solved.

Thank You!

[rguliev]

You are welcome!

[Loosie94]

Works great, thanks @rguliev !