Grow your CSS skills. Land your dream job.

Input validation popup in Chrome

  • # February 1, 2013 at 5:45 am

    Hi guys,

    I have a question regarding a possible bug in Chrome

    I’m using nyroModal (http://nyromodal.nyrodev.com/) to open a modal window with a form inside of it. One of the input fields is type=”email” so that the browser validates the input.

    My problem is, that when I click on the submit button Chrome sets the focus on the email field, but the littel tool-tip-balloon thingy isn’t showing up.
    [Chrome](http://cl.ly/image/2V3P1S0r3I37 “Chrome Screenshot”)

    In every other browser I have tested, this works perfectly fine
    [Firefox](http://cl.ly/image/463P1q3z0s2y “Firefox Screenshot”)

    Sadly I can’t provide you with the code right now, because the page I’m working on is password-protected for now and I wasn’t able to recreate the whole thing in code-pen : (

    Does someone has an idea or a similar issue?

    Thanks in advance
    Marco

    # February 1, 2013 at 6:05 am

    No problem for me with Chrome: http://jsfiddle.net/y6jsX/

    Did you set the required attribute on the field?

    # February 1, 2013 at 7:11 am

    Without using the modal window of nyroModal it’s fine on my end.
    May it’s some z-index issue or something.

    To answer your question: the > reqired attribute is set, doesn’t change anything.

    I try to replicate the problem to an open site and give you a link.

    # February 1, 2013 at 7:38 am

    Alright, here you go:
    [modalwindow problem](http://upload.gestalten.com/modalwindow.html “modalwindow problem”)

    On the top is the link that opens the modal-window, all fields are required and the last one is type=”email”.

    - Works in Opera and Firefox

    - Safari seems to ignore the validation part.

    - Chrome doesn’t show the popup.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".