jQuery：验证错误后，我的输入掩码功能在字段上不起作用

Question

我正在使用 JQuery 来成功验证我的表单。

我在我的表单中的出生日期字段中添加了一个屏蔽输入。屏蔽输入插件来自：https://github.com/RobinHerbots/jquery.inputmask

加载时，生日字段的屏蔽输入工作正常。如果表单已提交，但表单中其他字段的该字段的验证失败：生日字段的屏蔽字符分隔符被剥离，屏蔽输入不再有效。

我正在使用 jQuery、jQuery 验证插件、来自 https://github.com/RobinHerbots/jquery.inputmask 的输入掩码和 Bootstrap。

这是我的一些显示生日字段的表格。我的表单还有很多其他字段。

 <form name="add_contact_quick" id="add_contact_quick" method="POST" class="horizontal-form">
        <div class="form-body">

        <div class="alert alert-danger display-hide">
          <button class="close" data-close="alert"></button>
                You have some form errors. Please check below.
        </div>
        <div class="alert alert-success display-hide">
            <button class="close" data-close="alert"></button>
                Your form validation is successful!
        </div>
    <div class="col-md-12">
      <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>

          <div class="modal-footer form-actions right">
                                <button type="button" class="btn default" data-dismiss="modal">Cancel</button>
                                <button type="submit" class="btn blue"><i class="fa fa-check"></i> Save</button>
                            </div
          </form>

这是我的 javascript，它将验证表单并在验证失败时显示错误。

<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>

如果验证失败，我需要一种方法将掩码保留在输入框中。我很困惑为什么仅仅因为验证失败就将输入框从输入框中完全清除！

无论在生日输入框中输入什么值，都会去掉其输入掩码，只剩下数字。当我再次尝试编辑生日框时，没有像在页面加载时那样应用输入掩码。

Answer 1

感谢您对此发表评论。

快把我逼疯了。

我采纳了你的建议并做了 fiddle。

jsfiddle.net/epyo7gn5/

有趣的是，当我制作 fiddle 时，它成功了！

这让我意识到我使用的 inputmask 插件是一个旧版本。使用更新的插件解决了整个问题。

我觉得有点傻，但我学到了宝贵的一课。我不知道该项目使用了 "slightly" 旧版本，但如果不是这个线程和建议，我永远不会弄明白。

谢谢。

Answer 2

大家好，我遇到了同样的问题，但是当我从 https://github.com/RobinHerbots/jquery.inputmask 更新库后，问题就解决了。

问候

jQuery：验证错误后，我的输入掩码功能在字段上不起作用

jQuery: After Validation Error, my Input Mask function doesn't work on field

javascript

jquery

jquery-validate

maskedinput