dubbeltje
357
2
Vue

Only send a form when it is valid

Posted 3 years ago by dubbeltje

Hello,

I am playing around with vue-validator. It works pretty Nice. Just one question. How can I only send the form when it's valid. In the code below, I can press the button when it is valid and it will even submit the form.

 <validator name="validation1">
        <form action="#" novalidate v-on:submit.prevent>
            <div class="alert alert-warning"
                 v-if="$validation1.dirty && ($validation1.email.required || $validation1.group.required)">
                <p v-if="$validation1.email.required">Your email is required</p>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">@</span>
                    <label class="sr-only" for="email">Email</label>
                    <input type="text" id="email" name="email" :value="@{{subscription.email}}" class="form-control"
                           placeholder="[email protected]"
                           v-validate:email="['required']">
                </div>
            </div>
            <div class="radio">
                <label class="radio-inline">
                    <input type="radio" id="tenant" name="group" v-validate:group="['required']">I am a tenant
                </label>
                <label class="radio-inline">
                    <input type="radio" id="homeowner" v-validate:group name="group">I am a homeowner
                </label>
            </div>
            <div class="form-submit">
                <input type="submit" class="btn btn-primary" value="Stay up to date" v-on:click="subscribe"
                       :class="{'disabled' : $validation1.invalid}" />

            </div>
            <pre> {{ $validation1 | json }}</pre>
        </form>
    </validator>

Thanks very much.

Please sign in or create an account to participate in this conversation.