I am using JQuery to successfully validate my form.
I added an masked input to my birth date field in my form. The masked input plugin is from: https://github.com/RobinHerbots/jquery.inputmask
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.
My script:HTML Code:<div class="col-md-4"> <div class="form-group"> <label class="control-label">Date of Birth</label> <div class="input-icon right"> <i class="fa"></i> <input id="birthdate" name="birthdate" type="text" class="form-control"> </div> </div> </div>
HTML Code:<script> $(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"); }); </script>
Any thoughts why the input mask stops working after a failed validation? Thanks.




Reply With Quote