Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2013
    Location
    Texas, USA
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Pop up box not showing in Chrome/Firefox

    I'm using this for the html5 form validation to work on IE and old browsers as well: https://github.com/dsheiko/HTML5-Form-Shim

    Everything works fine across all browsers at this point except one check. I'm trying to show up text checking the database to see if an email is there or not. This works fine in IE. Chrom and Firefox don't show up the text at all. Here's the part it's calling.

    PHP Code:
    <script type="text/javascript">
                
    //validate email upon input
                
    $('form.register_form input[name=email]').bind("oninput", function ()
                {
                                                       
    alert("here");
                    var 
    messageBox = $('form.register_form span#msgbox2');
                    var 
    input = $(this);
                    
                    
    messageBox.removeClass().addClass('messagebox').html('Validating....').fadeIn(1000);

                    var 
    getData = $.post('classes/class.availability.php', { email:input.val() });
                    
    getData.done(function(data) {
                        
    //if correct login detail
                        
    if (data == 'empty')
                        {
                            
    // blank input
                            
    messageBox.fadeTo(200,.8,function() { 
                                
    //add message and change the class of the box and start fading
                                
    messageBox.html('Please put in a valid email!').addClass('messageboxerror').fadeTo(900,1);
                            });
                        }
                        if (
    data == 'yes')
                        {
                            
    // email is available
                            
    messageBox.fadeTo(200,0.8,function() { 
                                
    //add message and change the class of the box and start fading
                                
    messageBox.html('This email is available to register!').addClass('messageboxok').fadeTo(900,1);
                            });
                        }
                        if (
    data == 'no')
                        {
                            
    // email is not in database
                            
    messageBox.fadeTo(200,0.8,function() { 
                                
    //add message and change the class of the box and start fading
                                
    messageBox.html('This email could not be found in our database!').addClass('messageboxerror').fadeTo(900,1);
                            });
                        }
                        if (
    data == 'already')
                        {
                            
    // email has already been registered
                            
    messageBox.fadeTo(200,0.8,function() { 
                                
    //add message and change the class of the box and start fading
                                
    messageBox.html('This email is already registered!').addClass('messageboxerror').fadeTo(900,1);
                            });
                        }
                    }).
    fail(function(jqXHRtextStatuserrorThrown) { alert(textStatus': ' +errorThrown); });
                }); 
    Its not even calling this section, but the section under it does in fact work just fine (tried an alert and it didnt work).

    this part right under it works great:
    PHP Code:
    //validate password match upon input
                
    $('form.register_form input[name=pass2]').bind("oninput", function ()
                {
                    var 
    input = $(this);
                    if (
    input.val() != $('form.register_form input[name=pass1]').val()) {
                        
    input.setCustomValidity('The two passwords must match.');
                    } else {
                    
                    
    // input is valid -- reset the error message
                    
    input.setCustomValidity('');
                    }
                }); 
    So I'm pretty lost.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    if you are getting a blank, i would guess teh post isnt returning any data.

    you should trying putting alert(data) in your done function and Id bet it comes up empty.


    This is a shot in the dark, but I think your selectors may have something to do with it, they dont typically need to be that specific when the element has an id or name already.

    try

    Code:
    var messageBox = $('#msgbox2');

  • #3
    New Coder
    Join Date
    Jan 2013
    Location
    Texas, USA
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Well I have that first alert in there, and it's not even getting that far. It seems in Chrome/Firefox it's not even calling the function. Only works in IE.

    Doesn't even get to this in Chrome/FF

    PHP Code:
     $('form.register_form input[name=email]').bind("oninput", function () 
                { 
                                                       
    alert("here"); 

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    ok try using just

    PHP Code:
     $('input[name=email]').bind("oninput", function () 
                { 
                                                       
    alert("here"); 
    [/QUOTE]

    Oh by the way did you create your own oninput event? I jsut ask because im pretty sure jQuery doesnt support oninput yet : http://forum.jquery.com/topic/html5-oninput-event
    Last edited by DanInMa; 01-25-2013 at 09:02 PM.

  • #5
    New Coder
    Join Date
    Jan 2013
    Location
    Texas, USA
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts
    same thing still. Works IE but nothing else. I don't know how to use firebug too well, but I don't see the call either.

    and I believe the oninput is made from the link I'm using given in op. Maybe that's why its only IE? Would have to be user-created if jquery doesn't support it but works in IE right? I tried looking for anything browser specific in the code but didn't see anything.

    oninput is actually the html5 event, and this shim I'm using (the link in op) lets IE 9 and less also work with html5 validation for forms. So I believe it's a phantom event to replicate the actual html5 validations that work in FF, Opera, Chrome, ect.

    It's why it's weird it won't work, at least to me...
    Last edited by gkjr1; 01-25-2013 at 09:13 PM.

  • #6
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    ok, add this for testing purposes and see if you get an alert.


    Code:
     $('input[name=email]').bind("onchange", function () {
    alert("foo");
    })

  • #7
    New Coder
    Join Date
    Jan 2013
    Location
    Texas, USA
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DanInMa View Post
    ok, add this for testing purposes and see if you get an alert.


    Code:
     $('input[name=email]').bind("onchange", function () {
    alert("foo");
    })
    Nothing in any browser. Added the ; at the end too.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,568
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    Not to ask a silly question, but why not avoid most of the jQuery stuff, temporarily, and just do:
    Code:
       $("#xyz").onchange = function() { alert("got here"); };
    or even 
       document.getElementById("xyz").onchange = function() { alert("got here"); };
    Naturally that means you first add id="XYZ" to that <input>.

    If that works, then take it one step at a time to figure out what part jQuery is messing up.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    gkjr1 (01-25-2013)

  • #9
    New Coder
    Join Date
    Jan 2013
    Location
    Texas, USA
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Not to ask a silly question, but why not avoid most of the jQuery stuff, temporarily, and just do:
    Code:
       $("#xyz").onchange = function() { alert("got here"); };
    or even 
       document.getElementById("xyz").onchange = function() { alert("got here"); };
    Naturally that means you first add id="XYZ" to that <input>.

    If that works, then take it one step at a time to figure out what part jQuery is messing up.
    The usability of the one I'm using (at least on IE) to where it checks as typed, instead of when losing focus.

    Also to add, the first of yours didnt work. Second did on all browsers. I can put that in, but my point of posting what trying to get this actual one to work and I've run out of debug ideas. Figured I'd look for help to some kind of clash for IE to work (oddly, since ie sucks) and FF/Chrome not to work. It still didn't work with the code I was using for the verification of the email though, only the alert.

    Like I said I know there is also that option, but it's not really what I'm trying to do...

    I've been going through the shim code from the link posted in my op, trying to find anything that would stop FF/Chrome from working, but I don't see anything. I also need to catch the validation of the entire form on submit as well and have been searching through trying to find where it lets it go through with the submit button, but to no avail.
    Last edited by gkjr1; 01-25-2013 at 11:14 PM.


  •  

    Posting Permissions

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