4

I am using readonly, disabled and required property of input text field like this:

<input type="text" id="visitDate" name="visitdate" readonly="readonly" disabled="disabled" required="required" />

My problem is that two of three property i.e. disabled and readonly are working properly but required is not working. Submit button allows to submit even it is empty. But if I remove readonly form can't be submitted empty.

I use

readonly because I am using date picker and user are not allowed to input date manual.

disabled because I want this input field disable at the beginning

required because use must select date from date picker so that date will not be empty.

Community
  • 1
  • 1
Krity Shrestha
  • 333
  • 1
  • 4
  • 10
  • 2
    To clarify, the expected behaviour is that the form cannot be sent because there's a mandatory field that cannot be populated? – Álvaro González Feb 21 '17 at 16:36
  • 3
    If you disable a field then its will not submit that field that's why you are required is not working. Use readonly and required. – Aman Rawat Feb 21 '17 at 16:36
  • @AmanRawat I already mention "disable at the beginning" but not before submitting form. Input will be enabled later before submitting the form. – Krity Shrestha Feb 21 '17 at 16:45
  • @ÁlvaroGonzález Sorry I can't got you. I do not understand "cannot be populated". – Krity Shrestha Feb 21 '17 at 16:46
  • What actually happen is that by default, the validation in HTML will not fire if a field is read-only or disable. Reason is simply that if the field is empty with attribute disabled or read-only, and a required validation is applied, form could not be valid at any time. So, the solution cold be something like handeling keyup/keydown events so that input could not be added and for disable feature, I would suggest not to add the datepicker to the element until you want. Hope this will help. Not a right way, but it will just work fine. – Aman Jain Feb 21 '17 at 16:50
  • How you are enabling the input fied. If its javascript then please share that code – Aman Rawat Feb 21 '17 at 16:51
  • @AmanRawat I use `` input, if value of option is changed then this input text field will enabled. And select input is also mandatory. – Krity Shrestha Feb 21 '17 at 16:55
  • Possible duplicate of [HTML required readonly input in form](http://stackoverflow.com/questions/12777751/html-required-readonly-input-in-form) – bastos.sergio Feb 21 '17 at 17:36
  • @bastos.sergio No my scenario is little bit different, here user must select something from date picker, cannot be empty, readonly because user cannot insert data from keyboard, and at the beginning input text field must be empty. So please remove mark as duplicate and down-vote. – Krity Shrestha Feb 21 '17 at 17:58
  • @KrityShrestha Share your Jquery code so that we can see where you are enabling the disabled field. If you are removing the attribute then it will not work. You have to use prop it. Check this http://stackoverflow.com/questions/13626517/remove-disabled-attribute-using-jquery – Aman Rawat Feb 22 '17 at 06:20
  • @KrityShrestha if the input is readonly, then it can't be validated. This is by design because **readonly inputs will not be posted back to the server**. It's a browser safety issue. The browser assumes that if you declare that the input is readonly, that you don't care what happens to the input's value. If you wish to have your input reject data from the keyboard (but still allow input from other sources) then you must create javascript code to prevent input from the keyboard. – bastos.sergio Feb 22 '17 at 16:16

2 Answers2

4

What actually happen is that by default(HTML Implementation of Validations), the validation in HTML will not fire if a field is read-only or disable.

The Reason to it is simple. If the field is empty with attribute disabled or read-only, and a required validation is applied, the form could not be valid at any time.

It seems like there is no direct and ethical solution to this, but the indirect solution could be:

i) Handeling key-up/key-down events so that input could not be added.

jQuery Code: 

$('input').keypress(function(e) {
    e.preventDefault();
});

ii) For disabling control, I would suggest not to add the datepicker to the element until you want. Later, you can add it using JS when needed(In your case, register datepicker on select list changed event).

Also, you can use Enable and Disable jQuery events if you are using jQuery UI Datepickers like below:

$("#txtSearch").datepicker("enable");
$("#txtSearch").datepicker("disable");

For further reading, you can have a look to this link. This is a discussion on Bootstrap validation, but it applies to pure HTML too.

Hope, this will help.

Aman Jain
  • 655
  • 5
  • 17
  • This problem triggered if readonly property is used. Next thing is that I use read only because user must select the date from date picker not manual input. And I have only one option to use date picker. – Krity Shrestha Feb 21 '17 at 17:08
  • 1
    The readonly could be replaced by handeling keypress event. That's the only solution I can figure out :O – Aman Jain Feb 21 '17 at 17:09
  • Share the code snippet, I might help by adding some JS on that :) – Aman Jain Feb 21 '17 at 17:10
  • Sorry code snippet makes question more complex. And I am in middle of my project. Many variables and methods are related to each other. – Krity Shrestha Feb 21 '17 at 17:32
3

If an element is disabled, it is ignored in form validation.

From the WHATWG specification for HTML:

If an element is disabled, it is barred from constraint validation. (source)

You almost certainly don't actually want disabled here: you want the behaviour of readonly. From the section documenting that attribute:

The difference between disabled and readonly is that read-only controls can still function, whereas disabled controls generally do not function as controls until they are enabled. (source)

"Still functioning" includes validation, as well as things like the value being part of the data sent when the form is submitted.

lonesomeday
  • 233,373
  • 50
  • 316
  • 318
  • I totally agree about the The difference between disabled and readonly. But I need both because I have `` then only user can input date from date picker i.e. I have to make sure that first user select from `` input and then text input field. – Krity Shrestha Feb 21 '17 at 18:29
  • @KrityShrestha That's something you're going to have to solve with Javascript, I fear, rather than HTML validation. – lonesomeday Feb 21 '17 at 22:17