Results 1 to 17 of 17

Thread: [RESOLVED] After Validation Error, my Input Mask function doesn't work on field

  1. #1

    Thread Starter
    Fanatic Member
    Join Date
    Mar 2008
    Posts
    790

    Resolved [RESOLVED] After Validation Error, my Input Mask function doesn't work on field

    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.

    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>
    My script:

    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.

  2. #2
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

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

    Can you set a break at this line of code

    $("#birthdate").inputmask("99/99/9999");

    using something like FireBug?

    Also - why are you submitting the whole form to validate a birthdate?

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  3. #3

    Thread Starter
    Fanatic Member
    Join Date
    Mar 2008
    Posts
    790

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

    I added a breakpoint to that line.

    It stops when the page first loads to apply the mask to the birthdate input. That's all.

    Also - why are you submitting the whole form to validate a birthdate?
    Not sure? I have a form with many input fields. I just showed my birthdate field as that's the one I'm having issues with the input mask.

    I thought what was happening was when the form was submitted, jquery recognizes submit was clicked and then runs it's validation (.validate plugin). If something isn't submitted properly, then my error message is displayed and the appropriate text boxes turn red. I am also using Bootstrap for my css.

    Do I have something set up wrong? I'd be happy to change it to make it better.

    Adding the input mask to the birthdate works only when the date is entered initially. But if a validation error occurs for another field, then the input mask isn't applied to the birthdate field any more!

    Thanks!

  4. #4
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

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

    You say the second time the breakpoint is not hit.

    What if you set a breakpoint at the top of the READY event? Does it break the second time? If so then step through and see where it veers off.

    With my web apps I use a lot of AJAX. Basically I never re-submit the page.

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  5. #5

    Thread Starter
    Fanatic Member
    Join Date
    Mar 2008
    Posts
    790

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

    If I set that breakpoint at the READY event, no it only breaks when the page first loads.

    I was trying to research others having the same problem before - it was hard to research.

    I am wondering if there is a way with jQuery to attach the input mask to the input field permanently instead of having it apply the input mask on page load. OR maybe there's a way to re-apply the input mask if the validation doesn't pass and my error message is shown.

    Not sure how to do that! But, maybe that would do the trick?

  6. #6
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

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

    If the READY event is not firing the second time then you are using AJAX also, I would guess.

    Please show me the JAVASCRIPT code that runs when the data is submitted.

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  7. #7

    Thread Starter
    Fanatic Member
    Join Date
    Mar 2008
    Posts
    790

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

    Ajax is called from jQuery if the form validates properly. The ajax URL to process the data is: ajax_insert.php?table=contacts

    Code:
    <?php
    require_once 'core/init.php';
    
    $user = new User();
    if(!$user->isLoggedIn()) {
    	Redirect::to('login.php');
    }
    
    $contact = new Contact();
    
           DB::getInstance()->insert($_GET['table'], $_POST);
            $data = array("redirect" => "index.php");
    
    $json= json_encode($data);
    echo $json;
    
    ?>

  8. #8
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

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

    Sorry - didn't see that.

    Put a break at the IF statement here - does it break at that location?

    if (response.redirect) {

    Code:
                            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;
                                        }
                            }

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  9. #9

    Thread Starter
    Fanatic Member
    Join Date
    Mar 2008
    Posts
    790

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

    Yeah it breaks there, but only if the validation passes.

    If I put a break at error.show in:

    Code:
     invalidHandler: function (event, validator) { //display error alert on form submit              
                               success.hide();
                               error.show();
                               Metronic.scrollTo(error, -200);
                    },
    ... that is where the break happens when the form's validation fails. I need it to run my: $("#birthdate").inputmask("99/99/9999"); AGAIN at this point, I'm guessing to make the input mask work again. But if I simply do this:

    Code:
     invalidHandler: function (event, validator) { //display error alert on form submit              
                               success.hide();
                               error.show();
                               Metronic.scrollTo(error, -200);
                              $("#birthdate").inputmask("99/99/9999");
                    },
    ... and when I put a break on: $("#birthdate").inputmask("99/99/9999"); in the above, it does break at that point if the form doesn't pass validation, but the input mask is not showing in the input field.

  10. #10
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

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

    There is where I was heading - to find what code was running in the invalid data condition...

    Where you put that line of code - break at that spot - and at an immediate prompt

    What does this return?

    $("#birthdate").length

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  11. #11

    Thread Starter
    Fanatic Member
    Join Date
    Mar 2008
    Posts
    790

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

    I'm hoping what I did here is what you are looking for:

    Code:
     invalidHandler: function (event, validator) { //display error alert on form submit              
                               success.hide();
                               error.show();
                               Metronic.scrollTo(error, -200);
                               $("#birthdate").inputmask("99/99/9999");
                                alert($("#birthdate").length);
                    },
    So, if the form isn't validated properly, I get a message box that ALWAYS has value of '1'. No matter what is in the birthdate input.

    I am researching this and found someone who made this fiddle that it IS working:

    http://jsfiddle.net/2hdTn/

    However, I don't quite understand how the .addmethod works with the jquery validation plugin. I am also wondering if there's a way to adapt that to work with my birthdate input mask, which is different from the phone number mask they are using in that fiddle.

  12. #12
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

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

    1 is the correct value - the $("#birthdate") object is an ARRAY of items that match that selector.

    I wanted to see "1" so I would know for sure that DOM element is found.

    And it is.

    I use AJAX with POST's and not GET's so I don't get a whole form back line you do with this:

    window.location.href = reponse.redirect

    which means the DOM is only changed by my direct changes to it in JAVASCRIPT.

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  13. #13

    Thread Starter
    Fanatic Member
    Join Date
    Mar 2008
    Posts
    790

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

    Oh, I see. This is my first stab at ajax,but this jQuery input mask is driving me nuts.

    I need a way to keep that mask in the input box if the validation fails, right? I am confused as to why the input mask is cleared completely from the input box just because the validation fails!

    Makes no sense to me!

  14. #14

    Thread Starter
    Fanatic Member
    Join Date
    Mar 2008
    Posts
    790

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

    So, this drove me nuts, but I decided to scrap that particular input mask plugin and I tried this one:

    https://github.com/igorescobar/jQuery-Mask-Plugin

    I use it like this on document ready:

    $("#birthdate").mask("99/99/9999", {placeholder: "__/__/____"});

    That's it. If the form doesn't pass validation, the mask doesn't disappear! Maybe there's an issue with the other plugin?

    Either way, I have a solution.

  15. #15
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

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

    I'm in need of a phone # mask - will this mask you used here do that as well??

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  16. #16

    Thread Starter
    Fanatic Member
    Join Date
    Mar 2008
    Posts
    790

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

    Yeah, I'm using it now for all my phone numbers (with optional extensions) like this:

    $(".phone-mask").mask("(999) 999-9999 x99999");

    Working great so far.

  17. #17

    Thread Starter
    Fanatic Member
    Join Date
    Mar 2008
    Posts
    790

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

    Well, I feel like a silly man.

    I can finally put this to bed now.

    It turns out (unbeknownst to me) that my project folder that contained all my assets (which included the input mask plugin) was using an older input mask plugin from: https://github.com/RobinHerbots/jquery.inputmask

    After updating everything to the newest plugin, the problem went right away!

    Sheesh. Lesson learned.

    I like this input mask plugin better, so I'll be switching back to it.

    Thanks again for the help.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width