How to hide errors initially? initial="off" doesn't do the trick
lavezzi1 opened this issue · comments
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>