Element: Form validation isn't working

[lednhatkhanh]

Hello, I'm trying to use the form validation and I set my component code like this:

<template>
  <el-form :model="newUser" :rules="rules" :label-position="labelPosotion" ref="loginForm">
    <el-form-item label="Email">
      <el-input v-model="newUser.email" type="email"></el-input>
    </el-form-item>
    <el-form-item label="Password">
      <el-input v-model="newUser.password" type="password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary">Login</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    name: 'login',
    data() {
      return {
        labelPosotion: 'left',
        newUser: {
          email: '',
          password: '',
        },
        rules: {
          email: [
            { required: true, message: 'Please enter you email address', trigger: 'blur' },
            { type: 'email', message: 'Please enter a valid email address', trigger: 'blur' },
          ],
          password: [
            { required: true, message: 'Please enter your password', trigger: 'blur' },
            { min: 6, message: 'Your password is too short!' },
          ],
        },
      };
    },
  };
</script>

<style scoped>

</style>

But it doesn't work, event the :label-position="labelPosotion" is not working too!

my main.js file:

import 'element-ui/lib/theme-default/index.css';
import Vue from 'vue';
import ElementUI from 'element-ui';
import { sync } from 'vuex-router-sync';

import App from './App';
import router from './router';
import store from './store';

Vue.use(ElementUI);

sync(store, router);

/* eslint-disable no-new */
new Vue({
  store,
  router,
  el: '#app',
  template: '<App/>',
  components: { App },
});

[lednhatkhanh]

Oh, forgot the prop property, the validation is working now, but the label postion is still on top.

[baiyaaaaa]

typo error, please change 'labelPosotion' to 'labelPosition'

[pranav-smpx]

Hi! I am in a similar situation. Even after using the prop property, I cannot get the rules to work. It shows me the message even if I enter the data in input field.

[LucyMac]

Same for me

[nskin]

For anyone else with issue, check that you are using ref="" not :ref=""

[nerissa123456]

Same for me, error message still shows even after entering some data. I have ref="" not :ref=""

[meta0102]

you have to use the same values for v-model and prop in each form-item

[RickieWoo]

same for me , I just got undefined when validate the form, but console.log the validated result works for me,

[RickieWoo]

this.validateForm("addCardForm"): undefined

[Jiahui-Zhang]

For the label position, maybe try to change the label css by yourself. It could overwrite the default css.

[shershen08]

I had similar issue and the reason was that el-form was in the container that was in v-if statement
changing it to v-show fixed the problem.
So solution is to have a form element in the DOM

[raunicorn]

I had similar issue and the reason was that el-form was in the container that was in v-if statement
changing it to v-show fixed the problem.
So solution is to have a form element in the DOM

thanks shershen, this is also the reason why my form validation is not working