CODEWITHSUNDEEP
vue.jsvuejs2vee-validate
Nicolas S.Xu
Nicolas S.Xu

Reputation: 14544

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

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>

Upvotes: 0

Views: 5582

Answers (1)

tony19
tony19

Reputation: 138396

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.

Upvotes: 7

Related Questions