isValid() and data-validation-optional-if-answered

[dsoriano]

Hello,

perhaps I missed something, but I can't make data-validation-optional-if-answered working with the isValid() function.

Here is a form example :

<form>
    <div>
        <label for="appbundle_simulateur_revetementCarrelageInf50">Field 1</label>
        <input type="number" id="appbundle_simulateur_revetementCarrelageInf50" name="appbundle_simulateur[revetementCarrelageInf50]" data-validation="number" data-validation-optional-if-answered="appbundle_simulateur[revetementCarrelageSup50],appbundle_simulateur[revetementBois],appbundle_simulateur[revetementParquet]" />
    </div>

    <div>
        <label for="appbundle_simulateur_revetementCarrelageSup50">Field 2</label>
        <input type="number" id="appbundle_simulateur_revetementCarrelageSup50" name="appbundle_simulateur[revetementCarrelageSup50]" data-validation="number" data-validation-optional-if-answered="appbundle_simulateur[revetementCarrelageInf50],appbundle_simulateur[revetementBois],appbundle_simulateur[revetementParquet]" />
    </div>

    <div>
        <label for="appbundle_simulateur_revetementBois">Field 3</label>
        <input type="number" id="appbundle_simulateur_revetementBois" name="appbundle_simulateur[revetementBois]" data-validation="number" data-validation-optional-if-answered="appbundle_simulateur[revetementCarrelageInf50],appbundle_simulateur[revetementCarrelageSup50],appbundle_simulateur[revetementParquet]" />
    </div>

    <div>
        <label for="appbundle_simulateur_revetementParquet">Field 4</label>
        <input type="number" id="appbundle_simulateur_revetementParquet" name="appbundle_simulateur[revetementParquet]" data-validation="number" data-validation-optional-if-answered="appbundle_simulateur[revetementCarrelageInf50],appbundle_simulateur[revetementCarrelageSup50],appbundle_simulateur[revetementBois]" />
    </div>

    <hr>
    <input type="submit">
</form>

When I make validation with :

<script>
    $.validate({
        modules: 'logic',
        onSuccess: function() {
            alert('valid');
            return false;
        }
    });
</script>

Everything is ok, but if I make :

<script>
    var $form = $('form');
    $.formUtils.loadModules('jsconf, security, logic');

    $form.on('submit', function (e) {
        e.preventDefault();

        if ( $form.isValid({}, {}, true) ) {
            alert('valid');
        }
    });
</script>

It doesn't work, only the data-validation is working. I precise I must use isValid() because this form is part of a multi-steps form.

Thank you in advance for your answer.

[dsoriano]

Hello, nothing about this issue ?

[victorjonsson]

It seems you still need to setup the validation using $.validate({}). You also need to this after that the modules have loaded

$.formUtils.loadModules('jsconf, security, logic', null, function () {
   $.validate({});
});

(here's a working example http://jsbin.com/qomuzerume/edit?html,output)

But the question would then be why you're doing it like this?

[dsoriano]

Hello,

thank you for the answer. As I said, I have a multi-steps form and in previous issues I understand you tell to use this method. I will try with your answer and tell you.

Thanks again