Require and Regex with vee-validate

Question

I'm attempting to set a required and regex attributes with vee-validate. The regex bit works fine, but as soon as I add the required attribute the entire control disappears from the form.

This works fine (fiddle), but missing required attribute (multiline for easier reading):

<input 
  v-validate="{ regex:/^((\d{3})[ -]|(\d{3}[ -]?)){2}\d{4}$/ }" 
  :class="{'input': true, 'is-danger': errors.has('phonenumber') }" 
  class="input is-primary" 
  name="phonenumber" 
  type="text" 
  placeholder="404-555-1212"
> <!-- end input -->

This causes the entire form to disappear (fiddle) (multiline for easier reading):

<input 
  v-validate="{ required|regex:/^((\d{3})[ -]|(\d{3}[ -]?)){2}\d{4}$/ }" 
  :class="{'input': true, 'is-danger': errors.has('phonenumber') }" 
  class="input is-primary" 
  name="phonenumber" 
  type="text" 
  placeholder="404-555-1212"
> <!-- end input -->

I've tried using a comma to separate vee-validate attributes, but this also fails in the same manner.

What am I missing?

score 2 · Answer 1 · answered Aug 02 '18 at 21:03

I needed to include required: true, in order for the attribute to work correctly.

Like this:

<input 
  v-validate="{ required: true, regex:/^((\d{3})[ -]|(\d{3}[ -]?)){2}\d{4}$/ }" 
  :class="{'input': true, 'is-danger': errors.has('phonenumber') }" 
  class="input is-primary" 
  name="phonenumber" 
  type="text" 
  placeholder="404-555-1212"
> <!-- end input -->

Require and Regex with vee-validate

1 Answers1