VueFormular Demo

Live demo of VueFormular, a comprehensive form component for vue.js

by Mantaya Fishaimer

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js"></script>
<script src="https://rawgit.com/matfish2/vue-formular/master/dist/vue-formular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.17/daterangepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.17/daterangepicker.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.8/tinymce.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.9.3/vue-resource.min.js"></script>
<div id="app">
  <h2>VueFormular Demo <button class='btn btn-default' @click='resetForm()'>Reset Form</button></h2>
  
  <vf-form ajax 
           action="/echo/json" 
           method="POST" 
           :validation="validation"
           v-ref:form>

    <vf-status-bar></vf-status-bar>
   
   <vf-text     
   label="First name"      
   placeholder="Your name" 
   name="first_name"  
   v-ref:first_name 
   lazy></vf-text>
   
    <vf-number label="Age" 
               name="age" 
               v-ref:age>
      <i slot="afterField">
      Try to enter an invalid age
    </i>
    </vf-number>
    
    <vf-number label="Smaller than age" 
               name="smaller_than_age" 
               v-ref:smaller_than_age>
      <i...

CSS

#app {
  width: 95%;
  max-width: 500px;
  margin: 0 auto;
}

h2 {
  text-align: center;
  padding: 10px;
}

.form-control-feedback {
  top: 25px;
}

.VF-Field--required label {
  position: relative;
}

.VF-Field--required>label:before {
  content: "*";
  font-size: 20px;
  color: red;
  position: absolute;
  left: -15px;
}

.VF-Field--Number input {
  width: 100px;
}

.VF-Field--Date__datepicker.date__input {
  width:130px;
}

.VF-Field--Date__datepicker.date__span {
  border:1px solid #ddd;
  border-radius:5px;
  padding:8px;
  width:130px;
  cursor:pointer;
}

.VF-Field--Date__datepicker:hover {
  background:#efefef;
}

  .VF-Field__file-upload {
    position: relative;
  }

  .VF-Field__file-upload-icon  {
  position: absolute;
  }

  .VF-Field__file-upload input {
    opacity: 0;
    position: absolute;
    top:0;
    cursor:pointer;
  }
  
  .VF-Field--File {
    margin-bottom:26px;
  }
  
  .VF-Buttons__wrapper {
    width:50%;
  }

JavaScript

Vue.use(VueFormular, {
  showClientErrorsInStatusBar: true,
  sendOnlyDirtyFields:true
    //layout:'form-horizontal'
});

new Vue({
  el: "#app",
  methods:{
  	resetForm: function() {
    	this.$refs.form.childrenOf('form').forEach(function(field) {
      	field.reset();
      })
    }
  },
  data: {
    validation: {
      rules: {
        first_name: {
          required: true,
          min: 4
        },
        age: {
          between: [0, 120]
        },
        about: {
          max: 200
        },
        smaller_than_age: {
          smallerThan: 'age'
        },
        graduation_date: {
          greaterThan: 'birth_date'
        },
        married_years: {
          requiredIf: 'married',
          min: 0
        }
      }
    },
    pets: [{
        id: 1,
        text: 'Dog'
      }, {
        id: 2,
        text: 'Cat'
      }, {
        id: 3,
        text: 'Parrot'
      }, {
        id: 4,
        text: 'Hamster'
      }

    ],
    cars: [{
        id: 1,
        text: 'Mazda'
      }, {
        id: 2,
        text: 'Honda'
      }, {
        id: 3,
        text: 'Nissan'
      }, {
        id: 4,
        text: 'Alpha Romeo'
      }

    ],
    fruits: [{
        id: '1',
        text: 'Grapes'
      }, {
        id: '2',
        text: 'Apple'
      }, {
        id: '3',
        text: 'Orange'
      }, {
        id: '4',
        text: 'Lemon'
      }

    ],
    motorbikes: [{
        id: 1,
        text: 'Honda'
      }, {
        id: 2,
        text: 'Suzuki'
      }, {
        id: 3,
        text: 'Kawassaki'
      }, {
        id: 4,
        text: 'Yamaha'
      }

    ]

  }
});