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 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2019
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HTML 5 tooltip not showing in Firefox when using required attribute in form input

    Hi,

    I have tried the following:

    required
    required="required"
    required="true"
    aria-required="true"

    Code:
    <input name="Depot" id="Depot" type="text" class="form-control 
    attach-validation" aria-required="true" required="required"/>
    it works in chrome but in Firefox I am not seeing the tooltip stating the field is required.

    any help here is much appreciated

    My form is being loaded via Ajax, I'm not sure if that would be a problem?!
    Last edited by tdsjohn; Jul 11th, 2019 at 03:14 PM.

  2. #2
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,336
    Thanks
    7
    Thanked 1,362 Times in 1,331 Posts
    There is no tooltip stating that a field is required in Firefox. You only know that it is required if you try to submit a form without filling the field.

  3. #3
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,569
    Thanks
    5
    Thanked 516 Times in 503 Posts
    Quote Originally Posted by VIPStephan View Post
    There is no tooltip stating that a field is required in Firefox. You only know that it is required if you try to submit a form without filling the field.
    ... AND how they are handled varies from browser to browser since what things look like or are implemented is none of HTML's business, nor should it be.

    Though you can in modern browsers FAKE IT. If you put an empty element after (yes, empty, this s*** has no business in the HTML as plaintext) like a span, you can target it via "input:required + span" for any style you like. I would use generated content to create the message if it were demanded by a client... But only after telling the client we shouldn't be dicking around with that.

    In fact there are many pseudo-states you can exploit with CSS on inputs now. :required, ptional, :valid, and :invalid are all useful states.

    also, this is 2019 not 2009, you can drop the XML nonsense of required="required" or the silly trailing slash. Likewise I'd lose the ARIA role BS as it adds NOTHING of value to the page, particularly something as silly and pointless as aria-required.

    I also find your excess of classes... disturbing.

    <input type="text" name="Depot" required>

    ... and be done with it. You only need the ID if your LABEL has a for attribute. You can avoid both by wrapping the label around the input if the formatting would allow for it.

    But yeah, the default appearance of a required input is not specified by HTML and varies from browser to browser. I have no clue what you mean by a "HTML 5 tooltip" as there's no such thing!
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

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