Skip to content
This repository has been archived by the owner on Dec 25, 2017. It is now read-only.

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

Open
lavezzi1 opened this issue Oct 23, 2016 · 0 comments
Open

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

lavezzi1 opened this issue Oct 23, 2016 · 0 comments
Labels

Comments

@lavezzi1
Copy link

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>
@kazupon kazupon added the 2.x label Oct 29, 2016
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

2 participants