3

I have an input field that launches a datepicker. To make this work on a mobile device, I've made the field read only. This means that I can launch a date picker on click (or tap) using jQuery, and the tap doesn't open the keyboard on a mobile device.

However - a readonly attribute bypasses the HTML5 validation mechanisms. Can I add something that then either mimics the HTML5 validation look and feel, to keep consistency, or that forces HTML5 validation despite the field being readonly?

Edit: I'm looking for validating that the field is filled in (required) and preferably that it fits a certain date format.

Rob Grant
  • 7,239
  • 4
  • 41
  • 61
  • what kind of validation you want – Ankit Chaudhary Jun 26 '15 at 09:55
  • a `stopPropagation` and `preventDefault` don't prevent the keyboard to show up ? – Hacketo Jun 26 '15 at 09:55
  • @Hacketo: maybe, but they will probably also prevent the datepicker to work. A possible solution can be removing readonly and **blur** the element when focused, but I'm not sure if this will prevent the datepicker to work aswell. – briosheje Jun 26 '15 at 09:57
  • 1
    Doesn't removing the `readonly` attribute while submiting `form` fix it? Can you post concrete sample replicating your issue? – A. Wolff Jun 26 '15 at 09:58
  • @briosheje why it would prevent the datepicker to work ? – Hacketo Jun 26 '15 at 09:58
  • @Hacketo: Because it prevents the default action of that input? as far as I can remember preventDefault() or stopPropagation() prevents the datepicker to show up, I'm not 100% sure though, but the solutions provided to similar topics were to use blur and focus: http://stackoverflow.com/questions/10491790/ipad-how-to-prevent-the-keyboard-from-popping-up-on-jquery-datepicker (either using disabled or readonly or onfocus with blur) – briosheje Jun 26 '15 at 10:01
  • @Hacketo it's a jQuery datepicker where I just do something like `$('.datePicker.).datePicker();` and the plugin sorts it out. Are you saying I should be looking inside the plugin to do a `return false;`? (I think that's how you do those two in jQuery.) – Rob Grant Jun 26 '15 at 10:29
  • @A.Wolff that was it! Please post an answer and I'll accept it, or if you're not bothered let me know and I'll post my code and accept it. – Rob Grant Jul 08 '15 at 12:50
  • @RobertGrant Ya, you should post it as answer ;) – A. Wolff Jul 08 '15 at 12:54

2 Answers2

0

readonly fields cannot have the required attribute, generally they will already contain some value.

Look at the HTML5 Standard Drafts

Abhinav
  • 8,028
  • 12
  • 48
  • 89
0

Try looking at the 'pattern' attribute.

For dates, this pattern might come in handy:

^\d{4}\-\d{1,2}\-\d{1,2}$|^\d{1,2}\/\d{1,2}\/\d{4}$
user2072826
  • 528
  • 1
  • 5
  • 12