title: jQuery: After Validation Error, my Input Mask function doesn't work on field
body: <p>I am using JQuery to successfully validate my form.</p>
  
  <p>I added an masked input to my birth date field in my form. The masked input plugin is from: <a href="https://github.com/RobinHerbots/jquery.inputmask" rel="nofollow">https://github.com/RobinHerbots/jquery.inputmask</a></p>
  
  <p>On load, the birthdate field has the masked input working properly. If the form is submitted and validation is failed on that field of other fields in the form: the birthdate field is stripped of it's masked character separators and the masked input is not working anymore.</p>
  
  <p>I'm using jQuery, jQuery validate plugin, input mask from <a href="https://github.com/RobinHerbots/jquery.inputmask" rel="nofollow">https://github.com/RobinHerbots/jquery.inputmask</a>, and Bootstrap.</p>
  
  <p>Here's a bit of my form that shows the birthdate field.  My form has many other fields too.</p>
  
  <pre><code> &lt;form name="add_contact_quick" id="add_contact_quick" method="POST" class="horizontal-form"&gt;
          &lt;div class="form-body"&gt;
  
          &lt;div class="alert alert-danger display-hide"&gt;
            &lt;button class="close" data-close="alert"&gt;&lt;/button&gt;
                  You have some form errors. Please check below.
          &lt;/div&gt;
          &lt;div class="alert alert-success display-hide"&gt;
              &lt;button class="close" data-close="alert"&gt;&lt;/button&gt;
                  Your form validation is successful!
          &lt;/div&gt;
      &lt;div class="col-md-12"&gt;
        &lt;div class="form-group"&gt;
          &lt;label class="control-label"&gt;Date of Birth&lt;/label&gt;
           &lt;div class="input-icon right"&gt;
             &lt;i class="fa"&gt;&lt;/i&gt;
             &lt;input id="birthdate" name="birthdate" type="text" class="form-control"&gt;
           &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
            &lt;div class="modal-footer form-actions right"&gt;
                                  &lt;button type="button" class="btn default" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
                                  &lt;button type="submit" class="btn blue"&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt; Save&lt;/button&gt;
                              &lt;/div
            &lt;/form&gt;
  </code></pre>
  
  <p>Here's my javascript that will validate the form and show errors if validation fails.</p>
  
  <pre><code>&lt;script&gt;
  
  $(document).ready(function() {
  
          var form = $('#add_contact_quick');
          var error = $('.alert-danger', form);
          var success = $('.alert-success', form);
  
           $('#add_contact_quick').validate({
                  errorElement: 'span', //default input error message container
                  errorClass: 'help-block help-block-error', // default input error message class
                  focusInvalid: true, // do not focus the last invalid input
                  ignore: "",  // validate all fields including form hidden input
                  rules: {
                      friends_call_me: {
                          required: true
                      },
                      first: {
                          required: true
                      },
                      last: {
                          required: true
                      },
                      email: {
                          email: true
                      },
                      birthdate: {
                          date: true
                      }
                  },
  
                  invalidHandler: function (event, validator) { //display error alert on form submit              
                             success.hide();
                             error.show();
                             Metronic.scrollTo(error, -200);
                  },
  
                  errorPlacement: function (error, element) { // render error placement for each input type
                              var icon = $(element).parent('.input-icon').children('i');
                              icon.removeClass('fa-check').addClass("fa-warning");  
                              icon.attr("data-original-title", error.text()).tooltip({'container': 'body'});
                  },
  
  
                  highlight: function (element) { // hightlight error inputs
                              $(element)
                                  .closest('.form-group').removeClass("has-success").addClass('has-error'); // set error class to the control group   
                  },
  
                  unhighlight: function (element) { // revert the change done by highlight
  
                  },
  
                  success: function (label, element) {
                      var icon = $(element).parent('.input-icon').children('i');
                      $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
                      icon.removeClass("fa-warning").addClass("fa-check");
                  },
  
                  submitHandler: function(form) {
                      //form[0].reset();
                      success.show();
                      error.hide();
                      Metronic.scrollTo(success, -200);
                      $.ajax({
                          url: "ajax_insert.php?table=contacts",
                          type: form.method,
                          data: $(form).serialize(),
                          success: function(response) {
                                  //response here if data response
                              if (response.redirect) {
                                  // data.redirect contains the string URL to redirect to
                                      window.location.href = reponse.redirect;
                                      }
                          }        
                      });
  
                  }
  
           }); 
     $("#birthdate").inputmask("99/99/9999");
  
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I need a way to keep that mask in the input box if the validation fails. I am confused as to why the input mask is cleared completely from the input box just because the validation fails! </p>
  
  <p>Whatever value is entered into the birthdate input box is stripped of it's input mask, and I'm just left with numbers.  When I try to edit the birthdate box again, no input mask is applied like it was on page load.</p>