kazupon / vue-validator

:white_check_mark: Validator component for Vue.js
MIT License
2.19k stars 431 forks source link

How to hide errors initially? initial="off" doesn't do the trick #327

Open lavezzi1 opened 7 years ago

lavezzi1 commented 7 years ago

Hello. How can I hide all errors initially and keep form invalid? I mean if I set initial="off" to all my inputs my button will enabled, but I want to keep it disabled if form is invalid. How to that?

Current code:

<validator name="validation">
    <form class="form" novalidate>

        <div class="form__row" :class="{ 'form__row--error': $validation.subject.required }">
            <input autocomplete="off" placeholder="Subject" class="textbox-input" id="subject" type="text" v-model="ticket.subject" v-validate:subject="['required']" initial="off">
            <div class="error">
                <p v-if="$validation.subject.required">Required your name.</p>
            </div>
        </div>

        <div class="form__row" :class="{ 'form__row--error': $validation.description.required }">
            <input placeholder="Enter your problem" class="textbox-input" id="description" type="text" v-validate:description="{ required: true, minlength: 1, maxlength: 256 }" initial="off">
            <div class="error">
                <p v-if="$validation.description.maxlength">Your description is too long.</p>
            </div>
            <div class="error">
                <p v-if="$validation.description.minlength">Your description is too short.</p>
            </div>
        </div>

        <div class="form__row">
            <input id="apple" type="checkbox" value="apple" v-validate:fruits="{
                      required: { rule: true, message: 'Required fruit!' },
                      minlength: { rule: 1, message: 'Please chose at least 1 fruit!' },
                      maxlength: { rule: 2, message: 'Please chose at most 2 fruits !' }
                  }">
            <label for="apple">Apple</label>
            <input id="orange" type="checkbox" value="orange" v-validate:fruits>
            <label for="orange">Orange</label>
            <input id="grape" type="checkbox" value="grape" v-validate:fruits>
            <label for="grape">Grape</label>
            <input id="banana" type="checkbox" value="banana" v-validate:fruits>
            <label for="banana">Banana</label>
        </div>
        <li v-for="msg in $validation.fruits.errors">
        <p>{{msg.message}}</p>
        </li>

        <button type="submit" v-bind:disabled="!$validation.valid">Send</button>
    </form>
</validator>