search

kazupon / vue-validator

:white_check_mark: Validator component for Vue.js
MIT License
2.19k stars 431 forks source link

I found the v2.1.5, and try the checkbox example, but it errors. #288

Closed vrbvillor closed 8 years ago

vrbvillor commented 8 years ago 
[Vue warn]: Error when evaluating expression "$validation1.fruits.errors": TypeError: Cannot read property 'errors' of undefined

The html file is in this repository pathed examples/checkbox/index.html

The error message component must be a global component and not be a local one, isn't it ? When I use local component it shows errors.

The $resetValidation can't trigger the update of the DOM. If I use @click="onReset" and give the instance VM a method onReset, the form will not reset its components to their default value. And though the validation informations changes when called $resetValidation, the form won't reset, all the values of its components remains there, the error message will not become normal.

Reluctantly to fix this problem , I use the code below:

        setTimeout(function(){
            this.$resetValidation()
        }.bind(this),1);

With this , the form can reset both the components(inputs) and the validations......

kazupon commented 8 years ago

Sorry for my late reply.

The html file is in this repository pathed examples/checkbox/index.html

I tried to reproduce examples/checkbox/index.html. however, I could not confirm your reporting error. Can you tell me the vue.js version? Or Can you provide the reproduction code please?

kazupon commented 8 years ago

For the $resetValidation , it is another issue, and so sorry to cause you inconvenience, please register as new issue with reproduction codes.

kazupon commented 8 years ago

Close (inactivity)

vrbvillor commented 8 years ago

Vue.js is 1.0.26, validator is 2.1.5, 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>

<div id="app">
  <validator name="validation1">
    <form novalidate>
      <h1>Survey</h1>
      <fieldset>
        <legend>Which do you like fruit ?</legend>
        <input id="apple" type="checkbox" value="apple" v-validate:fruits="{
          required: { rule: true, message: requiredErrorMsg },
          minlength: { rule: 1, message: minlengthErrorMsg },
          maxlength: { rule: 2, message: maxlengthErrorMsg }
        }">
        <label for="apple">Apple</label>
        <input id="orange" type="checkbox" value="orange" v-validate:fruits>
        <label for="orange">Orage</label>
        <input id="grape" type="checkbox" value="grape" v-validate:fruits>
        <label for="grape">Grape</label>
        <input id="banana" type="checkbox" value="banana" v-validate:fruits>
        <label for="banana">Banana</label>
        <ul class="errors">
          <li v-for="msg in $validation1.fruits.errors">
            <p>{{msg.message}}</p>
          </li>
        </ul>
      </fieldset>
    </form>
  </validator>
</div>

</body>
</html>

<script src="srcs/js/vue1.0.26.js"></script>
<script src="srcs/js/vue-validator2.1.5.js"></script>
<script>

new Vue({
  el: '#app',
  computed: {
    requiredErrorMsg: function () {
      return 'Required fruit !!'
    },
    minlengthErrorMsg: function () {
      return 'Please chose at least 1 fruit !!'
    },
    maxlengthErrorMsg: function () {
      return 'Please chose at most 2 fruits !!'
    }
  }
})
</script>
kazupon commented 8 years ago

Thank you for your reproduction codes!! I guess that the issue. I'll try to fix.

kazupon commented 8 years ago

released v2.1.6