Dynamic form validation

Wappler General Need Help
1

@Teodor may I ask your assistance, please?
While dmx-bind:data-rule-min="targetValue.value.toNumber()"> works just perfectly, dmx-bind:data-rule-max="targetValue.value.toNumber()"> shows very weird error:

image

Example code with dmx-bind:data-rule-min:

<div class="container">
    <div class="row">
        <div class="col-12">
            <input id="targetValue" name="targetValue" type="number" class="form-control">
        </div>
        <div class="col-12">
            <input id="toValidate" name="toValidate" type="text" class="form-control" dmx-on:blur="toValidate.validate()" min="" dmx-bind:data-rule-min="targetValue.value.toNumber()">
        </div>
    </div>
</div>

Example code with dmx-bind:data-rule-max:

<div class="container">
    <div class="row">
        <div class="col-12">
            <input id="targetValue" name="targetValue" type="number" class="form-control">
        </div>
        <div class="col-12">
            <input id="toValidate" name="toValidate" type="text" class="form-control" dmx-on:blur="toValidate.validate()" max="" dmx-bind:data-rule-max="targetValue.value.toNumber()">
        </div>
    </div>
</div>
3

Does it work correctly if you remove the max="" from the element?

4

Yes.
Even combination of min and max works, but only if all input types are number.

<div class="container">
    <div class="row">
        <div class="col-12">
            <input id="targetValueMin" name="targetValueMin" class="form-control" placeholder="Min" type="number">
            <input id="targetValueMax" name="targetValueMax" class="form-control" placeholder="Max" type="number">
        </div>
        <div class="col-12">
            <input id="toValidate" name="toValidate" class="form-control" dmx-on:blur="toValidate.validate()" dmx-bind:data-rule-min="targetValueMin.value.toNumber()" dmx-bind:data-rule-max="targetValueMax.value.toNumber()" type="number">
        </div>
    </div>
</div>