Jquery validation plugin to implement in ember


#1

i have installed jquery validation plugin in my ember-app using bower. link-- https://jqueryvalidation.org/

i have to do form validation for materialize form.

how to write this code in ember–

in hbs —

<form class="col s12 m12 l12" id="formValidate">
          <div class="row">
            <div class="input-field col s12 m12 l8">
              <i class="material-icons prefix">email</i>
              {{input disabled id="email" type="email" name="email" class="validate" value=model.email}}
              <label for="email">Email<i class="mandatoryIcon">*</i></label>
            </div>
            <div class="input-field col s12 m6 l4">
              <i class="material-icons prefix">verified_user</i>
              {{input id="username" type="text" name="username" class="validate" value=model.username data-error=".errorTxt1" aria-invalid="true"}}
              <label for="username">User name<i class="mandatoryIcon">*</i></label>
              <div class="errorTxt1"></div>
            </div>
           </div>
</form>

in controllers—

 validate:function(){
  console.log("save>>");
    var form = $("#formValidate");
    form.validate({
        rules: {
            username: {
                required: true,
                minlength: 5
            },
         
        },
        //For custom messages
        messages: {
            username:{
                required: "Enter a username",
                minlength: "Enter at least 5 characters"
            },
            //curl: "Enter your website",
        },
        errorElement : 'div',
        errorPlacement: function(error, element) {
          var placement = $(element).data('error');
          if (placement) {
            $(placement).append(error)
          } else {
            error.insertAfter(element);
          }
        }
     });
 },
 didInsertElement: function(){
    let self = this;
    self.validate();
 },

actions:{
    save: function(){
          let self = this;
         /* var form = $("#formValidate");
          var isValid = form.validate();*/
          $(document).ajaxError(function(event, jqxhr) {
            var jsonResponse = JSON.parse(jqxhr.responseText);
            Materialize.toast(jsonResponse.statusMessage, 3000);  
          });  
            self.get('model').save().then(function(response){                  
            Materialize.toast(response.get("statusMessage"), 3000);  
          });      
        }
}

by this my validation message is not appearing. any solution ???