Basic example with vee-validate not working

Question

I'm trying to make a simple form validation page work with vee-validate. Something appears to be broken though, and I am unsure what exactly I am doing wrong.

The span tag appears as raw html:

Markup:

<!DOCTYPE html>
<html>
   <head>
      <script type='text/JavaScript' src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script type='text/JavaScript' src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
   </head>
   <body>
      <script type='text/JavaScript'>
         Vue.use(VeeValidate); // good to go.
         new Vue({
           el: '#app',
           data: {
              email_primary: null
           }
         });
      </script>


      <div id="app">
         <form action='#' method='POST'>
            <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email_primary') }" name="email_primary" type="text" placeholder="email_primary">
            <span v-show="errors.has('email_primary')" class="help is-danger">{{ errors.first('email_primary') }}</span>
            <button class="button is-link" name='submitform' value='go'>Submit</button>
         </form>
      </div>

    </body>
</html>

Fiddle.

What do I need to do to make vee-validate work as expected?

score 3 · Accepted Answer · answered Jun 19 '18 at 21:59

3

The issue(s)

It appears to have been a few things, but the main culprit was that the type attribute on all the script tags were set to text/JavaScript which is invalid. Its best to either not set the type, or if you do, set it to text/javascript.

Also, since you're utilizing div#app as a template rather than just the root element, I added in the proper attributes.

Finally, always load your javascript after your html.

Fixed Code

<!DOCTYPE html>
<html>
   <head>
      
   </head>
   <body>
       <div id="app">
         <form action='#' method='POST'>
            <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email_primary') }" name="email_primary" type="text" placeholder="email_primary">
            <span v-show="errors.has('email_primary')" class="help is-danger">{{ errors.first('email_primary') }}</span>
            <button class="button is-link" name='submitform' value='go'>Submit</button>
         </form>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
      <script>
         Vue.use(VeeValidate); // good to go.
         new Vue({
           el: "#app",
           template: '#app',
           data() {
            return {
              email_primary: null
            };
           }
         });
      </script>
    </body>
</html>

Also, a working jsfiddle.

I hope this helps!

answered Jun 19 '18 at 21:59

Derek Pollard

6,953
6
39
59

Thanks so much, this got me pointed in right direction. Can you explain a little about this: `div#app as a template rather than just the root element`. What do you mean by root element? Is there a better way to code it in? – a coder Jun 20 '18 at 03:17
@acoder well typically, you'd build it out so that all your components were self-contained in their own file - that includes HTML, CSS and the vue logic. A great tool for starting off is the `vue-cli`. It will scaffold you a new project with example logic so you can get a feel for it – Derek Pollard Jun 20 '18 at 03:19
What you described above (one file with dedicated form validation) is what I am looking for (I'm using Bulma html framework fwiw). Clearly, I am new to vee-validate so this is helpful. – a coder Jun 20 '18 at 13:29
1

Thanks again for the answer, just implemented and functions and looks very nice with Bulma. – a coder Jun 20 '18 at 16:49
No problem, I'm glad I could help! – Derek Pollard Jun 20 '18 at 16:49
sidenote, Another great UI library, if you're looking for one, is Vuetify: https://vuetifyjs.com/en/ – Derek Pollard Jun 20 '18 at 16:50
1

Just found this similar UI extension for Bulma: https://buefy.github.io – a coder Jun 20 '18 at 18:09
do you happen to know how to use vee-validate with a basic dropdown? – a coder Jun 20 '18 at 18:26

Basic example with vee-validate not working

1 Answers1

The issue(s)

Fixed Code