Vue with jQuery validate

by Florian Bar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<form id="app">
  <div class="form-group">
    <label for="">First Name</label>
    <input id="firstName" name="firstName" class="form-control" type="text"  v-model="firstName">
  </div>

  <div class="form-group" style="display: none;">
    <label for="">Last Name</label>
    <input id="lastName" name="lastName" class="form-control" type="text" v-model="lastName">
  </div>

  <div class="form-group">
    <label for="">Contact Number</label>
    <input id="tel" name="tel" class="form-control" type="text" v-model="tel">
  </div>

  <button type="button">Next</button>
</form>

CSS

.form-group {
  margin-bottom: 20px;
}

.form-control {
  display: block;
}

JavaScript

/* var app = new Vue({
  el: "#app",
  data: {
    firstName: "John",
    lastName: "Doe",
    email: "",
    tel: ""
  }
}); */

$(function() {

  $("#app").validate({
    rules: {
      firstName: "required",
      lastName: "required",
      tel: "required"
    },
    messages: {
      firstName: "Your first name",
      lastName: "Your last name",
      tel: "A contact number"
    },
    ignore: [":hidden"]
  });
  
  $("#app button").click(function() {
  	$("#app").validate();
  });
  
});