vuejs v-validate custom validation rule: max value must bigger than min value that user input

Question

Below are my code for 2 input fields in vuejs. The current validation rule is they both need to be numeric. I've read the official document here.

I need to add another rule, that max-amount must be bigger than min-amount. The trick is min-amount is user input, not pre-determined. How should I implement this customize validator?

        <div class="min-section">
          <label>Min</label>
          <input type="text" 
          class="uk-input"
          name="min-amount"
          v-validate="'numeric'"
          v-model="minAmount" />
        </div>
        <div class="max-section">
          <label>Max</label>
          <input type="text" 
          class="uk-input"
          name="max-amount" 
          v-validate="'numeric'"
          v-model="maxAmount"/>
        </div>

The [target dependent rules](https://baianat.github.io/vee-validate/guide/custom-rules.html#target-dependant-rules) section in the documentation covers this. — Brian Lee, Oct 05 '18 at 07:49

tony19 · Answer 1 · 2019-05-06T22:36:30.300

You could bind min_value in the v-validate rules of the max-amount <input>:

<input name="min-amount" v-model="minAmount">
<input name="max-amount"
       v-validate="'numeric|min_value:' + minAmount"
       v-model="maxAmount">

demo

Also note if you don't have a specific reason to use a text input, you should consider using <input type="number"> (instead of <input type="text">) so that the user could only enter numeric values.

vuejs v-validate custom validation rule: max value must bigger than min value that user input

1 Answers1