Question

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

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

在加载时，birthdate字段使屏蔽输入正常工作。如果提交表单并且在表单中其他字段的该字段上验证失败：生日字段将被剥夺其屏蔽字符分隔符，并且屏蔽输入不再起作用。

我使用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

感谢您对此发表评论。

这让我疯了。

我接受了你的建议并做了一个小提琴。

jsfiddle.net/epyo7gn5 /

有趣的是，当我正在制作小提琴时，它已经奏效了！

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

我觉得有点傻，但我学到了宝贵的一课。我不知道该项目使用的是“略微”旧版本，但如果不是这个帖子和建议我就不会想到它。

感谢。

Answer 2

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

问候

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

2 个答案: