javascript - How to implement a simple form with validation in a Vue app (with Vuetify.js)? - Stack Overflow

admin管理员组

文章数量:1188199

I'm trying to add a contact form with simple validation on a website built with Vue.js using a Vuetify.js example. I'm a newbie, so I'm not sure how it should be implemented in a Vue component.

---

I want to achieve a simple client side form validation and make it work with a / form.

---

UPDATED:

Code | Contact.vue

(taken from Vuetify.js form example)

<v-form v-model="valid">
      <v-text-field
        label="Name"
        v-model="name"
        :rules="nameRules"
        :counter="10"
        required
        name="Name"
      ></v-text-field>

      <v-text-field
        label="E-mail"
        v-model="email"
        :rules="emailRules"
        required
        name="Email"
      ></v-text-field>

      <v-btn
          @click="submit"
          :disabled="!valid"
      >submit</v-btn>
  </v-form>

  <form method="post" action="/[MY_ID_HERE]" id="nativeForm"></form>

Script

<script>
export default {
  name: 'contact',

  data () {
    return {
      snackbar: true, 
      valid: false,
        name: '',
        nameRules: [
          (v) => !!v || 'Name is required',
          (v) => v.length <= 10 || 'Name must be less than 10 characters'
        ],
        email: '',
        emailRules: [
          (v) => !!v || 'E-mail is required',
          (v) => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
        ]
      }
    },
    methods: {
      submit() {
        nativeForm.submit()
      }
    }
  }
</script>

I'm trying to add a contact form with simple validation on a website built with Vue.js using a Vuetify.js example. I'm a newbie, so I'm not sure how it should be implemented in a Vue component.

---

I want to achieve a simple client side form validation and make it work with a https://getform.org/ form.

---

UPDATED:

Code | Contact.vue

(taken from Vuetify.js form example)

<v-form v-model="valid">
      <v-text-field
        label="Name"
        v-model="name"
        :rules="nameRules"
        :counter="10"
        required
        name="Name"
      ></v-text-field>

      <v-text-field
        label="E-mail"
        v-model="email"
        :rules="emailRules"
        required
        name="Email"
      ></v-text-field>

      <v-btn
          @click="submit"
          :disabled="!valid"
      >submit</v-btn>
  </v-form>

  <form method="post" action="https://www.getform.org/f/[MY_ID_HERE]" id="nativeForm"></form>

Script

<script>
export default {
  name: 'contact',

  data () {
    return {
      snackbar: true, 
      valid: false,
        name: '',
        nameRules: [
          (v) => !!v || 'Name is required',
          (v) => v.length <= 10 || 'Name must be less than 10 characters'
        ],
        email: '',
        emailRules: [
          (v) => !!v || 'E-mail is required',
          (v) => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
        ]
      }
    },
    methods: {
      submit() {
        nativeForm.submit()
      }
    }
  }
</script>

• javascript
• forms
• vue.js
• vuetify.js

Share Improve this question Follow edited Jan 7, 2018 at 12:37 Bhuwan 16.9k55 gold badges3737 silver badges6060 bronze badges asked Dec 29, 2017 at 1:17 Un1Un1 4,1321414 gold badges4141 silver badges8585 bronze badges 11

• well seems like you don't have http://localhost:8080/api/submit route? you need serverside route. your port 8080 is used for client side (i.e. vuejs) i presume, thus you need serverside routes for form submit – Traxo Commented Dec 31, 2017 at 13:48
• @Traxo yeah, but, do I have to just create it in order for the form to work? Or it's not that simple? – Un1 Commented Dec 31, 2017 at 13:49
• For form validation, you don't need routes, but for submiting your data, you probably do. – Traxo Commented Dec 31, 2017 at 13:50
• see basic example where form is validated on client side without submit github.com/vuetifyjs/vuetifyjs.com/blob/master/examples/forms/… codepen.io/anon/pen/ppPqQx – Traxo Commented Dec 31, 2017 at 13:58
• @Traxo thanks, I've seen this example, but I didn't understand that it's what I needed (updated question). But now I'm getting message: null, email: null from the getform API (code updated in the question). In case you know how to pass the data to the second form so it wouldn't sent out null please post the answer I'll accept it – Un1 Commented Dec 31, 2017 at 14:18

 |  Show 6 more comments

2 Answers 2

Sorted by: Reset to default 14

Managed to make it work by using just 1 form:

<v-form method="post" action="https://www.getform.org/f/[YOUR-FORM-ID]" id="nativeForm" v-model="valid">

      <v-text-field
        label="Name"
        v-model="name"
        :rules="nameRules"
        :counter="10"
        required
        name="message"
      ></v-text-field>
      <v-text-field
        label="E-mail"
        v-model="email"
        :rules="emailRules"
        required
        name="mail"
      ></v-text-field>

      <v-btn @click="submit" :disabled="!valid">submit</v-btn>
 </v-form>

script

 <script>
    export default {
      name: 'contact',

      data () {
         return { 
            valid: false,
            name: '',
            nameRules: [
              (v) => !!v || 'Name is required',
              (v) => v.length <= 10 || 'Name must be less than 10 characters'
            ],
            email: '',
            emailRules: [
              (v) => !!v || 'E-mail is required',
              (v) => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
            ]
          }
        },
        methods: {
          submit() {
            nativeForm.submit()
          }
        }
      }
  </script>

Don't forget:

To add name attributes. Getform needs them.

const app = new Vue({
  el:'#app',
  data:{
    errors:[],
    name:null,
    age:null,
    movie:null
  },
  methods:{
    checkForm:function(e) {
      if(this.name && this.age) return true;
      this.errors = [];
      if(!this.name) this.errors.push("Name required.");
      if(!this.age) this.errors.push("Age required.");
      e.preventDefault();
    }
  }
})

input,select {
  margin-left: 10px;
}

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<form id="app" @submit="checkForm" action="/something" method="post">
  
  <p v-if="errors.length">
    <b>Please correct the following error(s):</b>
    <ul>
      <li v-for="error in errors">{{ error }}</li>
    </ul>
  </p>
  
  <p>
    <label for="name">Name<label>
    <input type="text" name="name" id="name" v-model="name">
  </p>

  <p>
    <label for="age">Age<label>
    <input type="number" name="age" id="age" v-model="age" min="0">
  </p>

  <p>
    <label for="movie">Favorite Movie<label>
    <select name="movie" id="movie" v-model="movie">
      <option>Star Wars</option>
      <option>Vanilla Sky</option>
      <option>Atomic Blonde</option>
    </select>
  </p>

  <p>
    <input type="submit" value="Submit">  
  </p>

</form>

Add some CSS and done.

本文标签： javascriptHow to implement a simple form with validation in a Vue app (with Vuetifyjs)Stack Overflow