Vue UI Components Documentation

Sets or gets whether the arrow of the hints will be shown.

<template>
  <JqxValidator ref="myValidator"
    :rules="rules" :arrow="false">
    <form id='testForm' action='./'>
       <table class='register-table'>
         <tr>
           <td>Username:</td>
           <td> 
             <input type='text' id='userInput' class='text-input' />
           </td>
         </tr>
         <tr>
           <td>E-mail:</td>
           <td>
             <input type='text' id='emailInput' class='text-input' />
           </td>
         </tr>
       </table>
     </form>
     <jqxButton @click='submit()' :width='50'>Submit</jqxButton>
  </JqxValidator>
</template>
 
<script>
  import JqxValidator from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxvalidator.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxValidator,
      JqxButton
    },
    data: function () {
      return  {
        rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
          { input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
          { input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
      }
    },
    methods: {
      submit: function () {
        this.$refs.myValidator.validate();
      }
    }
  }
</script>

Sets or gets the animation of showing, hiding the hints.

'fade'

'none'

<template>
  <JqxValidator ref="myValidator"
    :rules="rules" :animation="'none'">
    <form id='testForm' action='./'>
       <table class='register-table'>
         <tr>
           <td>Username:</td>
           <td> 
             <input type='text' id='userInput' class='text-input' />
           </td>
         </tr>
         <tr>
           <td>E-mail:</td>
           <td>
             <input type='text' id='emailInput' class='text-input' />
           </td>
         </tr>
       </table>
     </form>
     <jqxButton @click='submit()' :width='50'>Submit</jqxButton>
  </JqxValidator>
</template>
 
<script>
  import JqxValidator from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxvalidator.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxValidator,
      JqxButton
    },
    data: function () {
      return  {
        rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
          { input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
          { input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
      }
    },
    methods: {
      submit: function () {
        this.$refs.myValidator.validate();
      }
    }
  }
</script>

Sets or gets the duration of the animation used for showing/hiding the hints.

<template>
  <JqxValidator ref="myValidator"
    :rules="rules" :animationDuration="3000">
    <form id='testForm' action='./'>
       <table class='register-table'>
         <tr>
           <td>Username:</td>
           <td> 
             <input type='text' id='userInput' class='text-input' />
           </td>
         </tr>
         <tr>
           <td>E-mail:</td>
           <td>
             <input type='text' id='emailInput' class='text-input' />
           </td>
         </tr>
       </table>
     </form>
     <jqxButton @click='submit()' :width='50'>Submit</jqxButton>
  </JqxValidator>
</template>
 
<script>
  import JqxValidator from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxvalidator.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxValidator,
      JqxButton
    },
    data: function () {
      return  {
        rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
          { input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
          { input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
      }
    },
    methods: {
      submit: function () {
        this.$refs.myValidator.validate();
      }
    }
  }
</script>

Sets or gets whether the hints will be closed when the user click on them.

<template>
  <JqxValidator ref="myValidator"
    :rules="rules" :closeOnClick="false">
    <form id='testForm' action='./'>
       <table class='register-table'>
         <tr>
           <td>Username:</td>
           <td> 
             <input type='text' id='userInput' class='text-input' />
           </td>
         </tr>
         <tr>
           <td>E-mail:</td>
           <td>
             <input type='text' id='emailInput' class='text-input' />
           </td>
         </tr>
       </table>
     </form>
     <jqxButton @click='submit()' :width='50'>Submit</jqxButton>
  </JqxValidator>
</template>
 
<script>
  import JqxValidator from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxvalidator.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxValidator,
      JqxButton
    },
    data: function () {
      return  {
        rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
          { input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
          { input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
      }
    },
    methods: {
      submit: function () {
        this.$refs.myValidator.validate();
      }
    }
  }
</script>

Sets or gets whether the jqxValidator will focus the first invalid input.

<template>
  <JqxValidator ref="myValidator"
    :rules="rules" :focus="false">
    <form id='testForm' action='./'>
       <table class='register-table'>
         <tr>
           <td>Username:</td>
           <td> 
             <input type='text' id='userInput' class='text-input' />
           </td>
         </tr>
         <tr>
           <td>E-mail:</td>
           <td>
             <input type='text' id='emailInput' class='text-input' />
           </td>
         </tr>
       </table>
     </form>
     <jqxButton @click='submit()' :width='50'>Submit</jqxButton>
  </JqxValidator>
</template>
 
<script>
  import JqxValidator from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxvalidator.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxValidator,
      JqxButton
    },
    data: function () {
      return  {
        rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
          { input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
          { input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
      }
    },
    methods: {
      submit: function () {
        this.$refs.myValidator.validate();
      }
    }
  }
</script>

Sets or gets the hint type. Possible values: 'tooltip' and 'label'.

<template>
  <JqxValidator ref="myValidator"
    :rules="rules" :hintType="'label'">
    <form id='testForm' action='./'>
       <table class='register-table'>
         <tr>
           <td>Username:</td>
           <td> 
             <input type='text' id='userInput' class='text-input' />
           </td>
         </tr>
         <tr>
           <td>E-mail:</td>
           <td>
             <input type='text' id='emailInput' class='text-input' />
           </td>
         </tr>
       </table>
     </form>
     <jqxButton @click='submit()' :width='50'>Submit</jqxButton>
  </JqxValidator>
</template>
 
<script>
  import JqxValidator from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxvalidator.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxValidator,
      JqxButton
    },
    data: function () {
      return  {
        rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
          { input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
          { input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
      }
    },
    methods: {
      submit: function () {
        this.$refs.myValidator.validate();
      }
    }
  }
</script>

Sets or gets callback which will be called on validation error.

<template>
  <JqxValidator ref="myValidator"
    :rules="rules" :onError="onError">
    <form id='testForm' action='./'>
       <table class='register-table'>
         <tr>
           <td>Username:</td>
           <td> 
             <input type='text' id='userInput' class='text-input' />
           </td>
         </tr>
         <tr>
           <td>E-mail:</td>
           <td>
             <input type='text' id='emailInput' class='text-input' />
           </td>
         </tr>
       </table>
     </form>
     <jqxButton @click='submit()' :width='50'>Submit</jqxButton>
  </JqxValidator>
</template>
 
<script>
  import JqxValidator from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxvalidator.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxValidator,
      JqxButton
    },
    data: function () {
      return  {
        rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
          { input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
          { input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
      }
    },
    methods: {
      submit: function () {
        this.$refs.myValidator.validate();
      },
      onError: function () {
        alert('You have not filled the form correctly!');
      }
    }
  }
</script>

Sets or gets the callback which will be executed on success.

<template>
  <JqxValidator ref="myValidator"
    :rules="rules" :onSuccess="onSuccess">
    <form id='testForm' action='./'>
       <table class='register-table'>
         <tr>
           <td>Username:</td>
           <td> 
             <input type='text' id='userInput' class='text-input' />
           </td>
         </tr>
         <tr>
           <td>E-mail:</td>
           <td>
             <input type='text' id='emailInput' class='text-input' />
           </td>
         </tr>
       </table>
     </form>
     <jqxButton @click='submit()' :width='50'>Submit</jqxButton>
  </JqxValidator>
</template>
 
<script>
  import JqxValidator from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxvalidator.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxValidator,
      JqxButton
    },
    data: function () {
      return  {
        rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
          { input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
          { input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
      }
    },
    methods: {
      submit: function () {
        this.$refs.myValidator.validate();
      },
      onSuccess: function () {
        alert('You have filled the form correctly!');
      }
    }
  }
</script>

Sets or gets the default position of the hints.

<template>
  <JqxValidator ref="myValidator"
    :rules="rules" :position="'left'">
    <form id='testForm' action='./'>
       <table class='register-table'>
         <tr>
           <td>Username:</td>
           <td> 
             <input type='text' id='userInput' class='text-input' />
           </td>
         </tr>
         <tr>
           <td>E-mail:</td>
           <td>
             <input type='text' id='emailInput' class='text-input' />
           </td>
         </tr>
       </table>
     </form>
     <jqxButton @click='submit()' :width='50'>Submit</jqxButton>
  </JqxValidator>
</template>
 
<script>
  import JqxValidator from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxvalidator.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxValidator,
      JqxButton
    },
    data: function () {
      return  {
        rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
          { input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
          { input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
      }
    },
    methods: {
      submit: function () {
        this.$refs.myValidator.validate();
      }
    }
  }
</script>

Sets jqxValidator rules. Format of a single rule is as follows:

{ input: 'selector-of-the-input', 
    message: 'Custom message on error', 
    action: 'Custom action (keyup, change...etc)', 
    rule: 'Build rule (ssn, phone, email...) or custom function', 
    position: 'Position of the hint (format pos:x,y)', 
    hintRender: 'Function for hint rendering' }
                                

<template>
  <JqxValidator ref="myValidator"
    :rules="rules">
    <form id='testForm' action='./'>
       <table class='register-table'>
         <tr>
           <td>Username:</td>
           <td> 
             <input type='text' id='userInput' class='text-input' />
           </td>
         </tr>
         <tr>
           <td>E-mail:</td>
           <td>
             <input type='text' id='emailInput' class='text-input' />
           </td>
         </tr>
       </table>
     </form>
     <jqxButton @click='submit()' :width='50'>Submit</jqxButton>
  </JqxValidator>
</template>
 
<script>
  import JqxValidator from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxvalidator.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxValidator,
      JqxButton
    },
    data: function () {
      return  {
        rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
          { input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
          { input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
      }
    },
    methods: {
      submit: function () {
        this.$refs.myValidator.validate();
      }
    }
  }
</script>

Sets or gets a value indicating whether the validation messages are displayed from the left side instead of the right.

<template>
  <JqxValidator ref="myValidator"
    :rules="rules" :rtl="true">
    <form id='testForm' action='./'>
       <table class='register-table'>
         <tr>
           <td>Username:</td>
           <td> 
             <input type='text' id='userInput' class='text-input' />
           </td>
         </tr>
         <tr>
           <td>E-mail:</td>
           <td>
             <input type='text' id='emailInput' class='text-input' />
           </td>
         </tr>
       </table>
     </form>
     <jqxButton @click='submit()' :width='50'>Submit</jqxButton>
  </JqxValidator>
</template>
 
<script>
  import JqxValidator from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxvalidator.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxValidator,
      JqxButton
    },
    data: function () {
      return  {
        rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
          { input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
          { input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
      }
    },
    methods: {
      submit: function () {
        this.$refs.myValidator.validate();
      }
    }
  }
</script>

This is triggered when the form is validated with some errors.

Code examples

Bind to the validationError event of jqxValidator.

<template>
  <JqxValidator ref="myValidator" @validationError="onValidationError($event)"
    :rules="rules">
    <form id='testForm' action='./'>
       <table class='register-table'>
         <tr>
           <td>Username:</td>
           <td> 
             <input type='text' id='userInput' class='text-input' />
           </td>
         </tr>
         <tr>
           <td>E-mail:</td>
           <td>
             <input type='text' id='emailInput' class='text-input' />
           </td>
         </tr>
       </table>
     </form>
     <jqxButton @click='submit()' :width='50'>Submit</jqxButton>
  </JqxValidator>
</template>
 
<script>
  import JqxValidator from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxvalidator.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxValidator,
      JqxButton
    },
    data: function () {
      return  {
        rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
          { input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
          { input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
      }
    },
    methods: {
      submit: function () {
        this.$refs.myValidator.validate();
      },
      onValidationError: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This is triggered when the form is validated whithout any errors.

Code examples

Bind to the validationSuccess event of jqxValidator.

<template>
  <JqxValidator ref="myValidator" @validationSuccess="onValidationSuccess($event)"
    :rules="rules">
    <form id='testForm' action='./'>
       <table class='register-table'>
         <tr>
           <td>Username:</td>
           <td> 
             <input type='text' id='userInput' class='text-input' />
           </td>
         </tr>
         <tr>
           <td>E-mail:</td>
           <td>
             <input type='text' id='emailInput' class='text-input' />
           </td>
         </tr>
       </table>
     </form>
     <jqxButton @click='submit()' :width='50'>Submit</jqxButton>
  </JqxValidator>
</template>
 
<script>
  import JqxValidator from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxvalidator.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxValidator,
      JqxButton
    },
    data: function () {
      return  {
        rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
          { input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
          { input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
      }
    },
    methods: {
      submit: function () {
        this.$refs.myValidator.validate();
      },
      onValidationSuccess: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Hide all hints for a specific input.

<template>
  <JqxValidator ref="myValidator"
         :rules="rules">
    <form id='testForm' action='./'>
      <table class='register-table'>
        <tr>
          <td>Username:</td>
          <td>
            <input type='text' id='userInput' class='text-input' />
          </td>
        </tr>
        <tr>
          <td>E-mail:</td>
          <td>
            <input type='text' id='emailInput' class='text-input' />
          </td>
        </tr>
      </table>
    </form>
    <jqxButton @click='submit()' :width='50'>Submit</jqxButton>
  </JqxValidator>
</template>
<script>
  import JqxValidator from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxvalidator.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxValidator,
      JqxButton
    },
    data: function () {
      return {
        rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
        { input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
        { input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
      }
    },
    methods: {
      submit: function () {
        this.$refs.myValidator.validate();
      }
    },
    mounted: function () {
      this.$refs.myValidator.validate();
      this.$refs.myValidator.hideHint('#userInput');
    }
  }
</script>

Hiding all hints for the current form.

<template>
  <JqxValidator ref="myValidator"
         :rules="rules">
    <form id='testForm' action='./'>
      <table class='register-table'>
        <tr>
          <td>Username:</td>
          <td>
            <input type='text' id='userInput' class='text-input' />
          </td>
        </tr>
        <tr>
          <td>E-mail:</td>
          <td>
            <input type='text' id='emailInput' class='text-input' />
          </td>
        </tr>
      </table>
    </form>
    <jqxButton @click='submit()' :width='50'>Submit</jqxButton>
  </JqxValidator>
</template>
<script>
  import JqxValidator from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxvalidator.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxValidator,
      JqxButton
    },
    data: function () {
      return {
        rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
        { input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
        { input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
      }
    },
    methods: {
      submit: function () {
        this.$refs.myValidator.validate();
      }
    },
    mounted: function () {
      this.$refs.myValidator.validate();
      this.$refs.myValidator.hide();
    }
  }
</script>

Updating the positions of all hints. This is useful for example on window resize.

<template>
  <JqxValidator ref="myValidator"
         :rules="rules">
    <form id='testForm' action='./'>
      <table class='register-table'>
        <tr>
          <td>Username:</td>
          <td>
            <input type='text' id='userInput' class='text-input' />
          </td>
        </tr>
        <tr>
          <td>E-mail:</td>
          <td>
            <input type='text' id='emailInput' class='text-input' />
          </td>
        </tr>
      </table>
    </form>
    <jqxButton @click='submit()' :width='50'>Submit</jqxButton>
  </JqxValidator>
</template>
<script>
  import JqxValidator from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxvalidator.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxValidator,
      JqxButton
    },
    data: function () {
      return {
        rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
        { input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
        { input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
      }
    },
    methods: {
      submit: function () {
        this.$refs.myValidator.validate();
      }
    },
    mounted: function () {
      this.$refs.myValidator.validate();
      this.$refs.myValidator.updatePosition();
    }
  }
</script>

Validating the whole form.

<template>
  <JqxValidator ref="myValidator"
    :rules="rules">
    <form id='testForm' action='./'>
       <table class='register-table'>
         <tr>
           <td>Username:</td>
           <td> 
             <input type='text' id='userInput' class='text-input' />
           </td>
         </tr>
         <tr>
           <td>E-mail:</td>
           <td>
             <input type='text' id='emailInput' class='text-input' />
           </td>
         </tr>
       </table>
     </form>
     <jqxButton @click='submit()' :width='50'>Submit</jqxButton>
  </JqxValidator>
</template>
 
<script>
  import JqxValidator from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxvalidator.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxValidator,
      JqxButton
    },
    data: function () {
      return  {
        rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
          { input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
          { input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
      }
    },
    methods: {
      submit: function () {
        this.$refs.myValidator.validate();
      }
    },
    mounted: function () {
      this.$refs.myValidator.validate();
    }
  }
</script>

Validates a single input. This method accepts a single parameter which is selector of the input you want to validate. Notice that this selector should be the same like the one you've passed in the rules array.

<template>
  <JqxValidator ref="myValidator"
    :rules="rules">
    <form id='testForm' action='./'>
       <table class='register-table'>
         <tr>
           <td>Username:</td>
           <td> 
             <input type='text' id='userInput' class='text-input' />
           </td>
         </tr>
         <tr>
           <td>E-mail:</td>
           <td>
             <input type='text' id='emailInput' class='text-input' />
           </td>
         </tr>
       </table>
     </form>
     <jqxButton @click='submit()' :width='50'>Submit</jqxButton>
  </JqxValidator>
</template>
 
<script>
  import JqxValidator from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxvalidator.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxValidator,
      JqxButton
    },
    data: function () {
      return  {
        rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
          { input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
          { input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
      }
    },
    methods: {
      submit: function () {
        this.$refs.myValidator.validate();
      }
    },
    mounted: function () {
      this.$refs.myValidator.validateInput('#userInput');
    }
  }
</script>