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?

Derek Pollard · Accepted Answer · 2018-06-19 21:59:52Z

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, 2018 at 21:59

Derek Pollard

7,1956 gold badges45 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

a coder Over a year ago

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?

Derek Pollard Over a year ago

@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

a coder Over a year ago

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 Over a year ago

Thanks again for the answer, just implemented and functions and looks very nice with Bulma.

a coder Over a year ago

Just found this similar UI extension for Bulma: buefy.github.io

|

Collectives™ on Stack Overflow

Basic example with vee-validate not working

1 Answer 1

The issue(s)

Fixed Code

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

The issue(s)

Fixed Code

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related