HTML required readonly input in form

Question

I'm making a form. And on one input tag is an OnClick event handler, which is opening a popup, where you can choose some stuff, and then it autofills the input tag.

That input tag is also readonly, so only right data will be entered.

This is the code of the input tag:

<input type="text" name="formAfterRederict" id="formAfterRederict" size="50" required readonly="readonly" OnClick="choose_le_page();"  />

But the required attribute isn't working in Chrome. But the field is required.

Does anybody know how I can make it work?

`required` is a attribute new in HTML5 - it is still not supported in all browsers — Muleskinner, Oct 08 '12 at 08:22
You should mark your question with the HTML5 tag and Chrome tag — Muleskinner, Oct 08 '12 at 08:28
@Muleskinner: It's supported by the stable versions of Firefox, Chrome and Opera: http://caniuse.com/#search=required — Blender, Oct 08 '12 at 08:30
@Blender, thanks for the website, i bookmarked it right away :D — Mathlight, Oct 08 '12 at 08:36

Kanak Singhal · Accepted Answer · 2021-02-17T06:20:10.897

115

I had same requirement as yours and I figured out an easy way to do this. If you want a "readonly" field to be "required" also (which is not supported by basic HTML), and you feel too lazy to add custom validation, then just make the field read only using jQuery this way:

IMPROVED

form the suggestions in comments

<input type="text" class="readonly" autocomplete="off" required />

<script>
    $(".readonly").on('keydown paste focus mousedown', function(e){
        if(e.keyCode != 9) // ignore tab
            e.preventDefault();
    });
</script>

Credits: @Ed Bayiates, @Anton Shchyrov, @appel, @Edhrendal, @Peter Lenjo

ORIGINAL

<input type="text" class="readonly" required />

<script>
    $(".readonly").keydown(function(e){
        e.preventDefault();
    });
</script>

edited Feb 17 '21 at 06:20

answered Sep 05 '14 at 22:18

Kanak Singhal

3,074
1
19
17

5

I also added a paste handler to preventDefault, and the solution was complete! – Ed Bayiates Sep 10 '15 at 20:11
5

Good answer, but his blocked **ALL** keys (included Tab, Left, Right) and not blocked `Cut` event. I wrote self version :) – Anton Shchyrov Apr 18 '17 at 21:27
Thanks a lot! @Kanak your answer was useful for me. – Carmoreno May 16 '17 at 20:44
Please note that this solution doesn't quite work for number inputs. You can still use the arrow keys to change input. – appel Dec 15 '17 at 18:09
1

The fix for number input is adding a 'mousedown' handler. – appel Dec 15 '17 at 18:17
@appel, in my case I needed the mouse click event, but I could use type="text" with pattern="[0-9]*". Anyway its a nice catch worth pointing out. thanks – Kanak Singhal Dec 15 '17 at 18:41
@KanakSinghal Gotcha! I needed mine to be `type="number"` so I could use `min="100"` and `required` and have client side validation work (which it will not with the `readonly` attribute). – appel Dec 15 '17 at 22:48
Beware the autocompletion. Add `autocomplete="off"` on the input or with jQuery: `$(".readonly").attr("autocomplete", "off")` or `$(".readonly").prop("autocomplete", "off")` for jQuery >=1.6. – Edhrendal Jul 03 '19 at 14:24
2

I added the focus handler to avoid autocomplete and showing the cursor. – Peter Mghendi Feb 01 '20 at 13:37

score 34 · Answer 2 · answered Oct 08 '12 at 08:24

34

readonly fields cannot have the required attribute, as it's generally assumed that they will already hold some value.

answered Oct 08 '12 at 08:24

BenM

52,573
26
113
168

2

And you don't know an work around? because i want to check it before the form is realy submitted... – Mathlight Oct 08 '12 at 08:27
@TWCrap if your input field is read only how do you suppose your user gonna enter any value in that ?? – yogi Oct 08 '12 at 08:28
2

@yogi, if you readed the question right, then you saw that i use on OnClick event handler that will popup something that sends an value back... – Mathlight Oct 08 '12 at 08:29
1

Well, aside from making some validation to ensure that the value is only one of those you are entering using your JS, there's little you can do. Also, I'd recommend using `onfocus`, for the use of tabs on your form. – BenM Oct 08 '12 at 08:32
1

@yogi with a datepicker modal . . . – ajbraus Jul 21 '14 at 17:27
2

Yeah datepicker modal is the obvious use case, `readonly` because it's the only way to stop a mobile device's keyboard popping up unnecessarily. – Rob Grant Jun 05 '15 at 10:13

score 26 · Answer 3 · answered Dec 29 '17 at 10:01

26

Remove readonly and use function

<input type="text" name="name" id="id" required onkeypress="return false;" />

It works as you want.

answered Dec 29 '17 at 10:01

Parth Patel

799
1
13
20

3

can not handle delete content when backspace button it clicked. – Sanjoy Kanrar Jun 23 '18 at 16:02
Is there a way to get rid of the cursor ? maybe focus on some else? is it possible ? – thanos.a Apr 13 '20 at 21:39

Yevgeniy Afanasyev · Answer 4 · 2019-11-26T23:21:18.947

21

Required and readonly don't work together.

But readonly can be replaced with following construction:

     <input     type="text"
                onkeydown="return false;"
                style="caret-color: transparent !important;"                   
                required>

1) onkeydown will stop manipulation with data

2) style="caret-color: transparent !important;" will hide cursor.

3) you can add style="pointer-events: none;" if you don't have any events on your input, but it was not my case, because I used a Month Picker. My Month picker is showing a dialog on click.

edited Nov 26 '19 at 23:21

answered Feb 01 '19 at 02:01

Yevgeniy Afanasyev

37,872
26
173
191

Thank you, thats a simple solution. – matasoy Feb 23 '21 at 21:04

user2428118 · Answer 5 · 2012-10-08T08:43:36.013

16

This is by design. According to the official HTML5 standard drafts, "if the readonly attribute is specified on an input element, the element is barred from constraint validation." (E.g. its values won't be checked.)

edited Oct 08 '12 at 08:43

answered Oct 08 '12 at 08:28

user2428118

7,935
4
45
72

score 9 · Answer 6 · answered Feb 15 '17 at 18:50

9

Yes, there is a workaround for this issue. I found it from https://codepen.io/fxm90/pen/zGogwV site.

Solution is as follows.

HTML File

<form>
  <input type="text" value="" required data-readonly />
  <input type="submit" value="Submit" />
</form>

CSS File

input[data-readonly] {
  pointer-events: none;
}

answered Feb 15 '17 at 18:50

Udara Seneviratne

2,303
1
33
49

1

This seems pretty neat. What do you know about the browser support for this css trick? – Mathlight Feb 15 '17 at 22:37
6

This doesn't prevent anyone from tabbing into the field and typing some text. – sean Sep 10 '17 at 15:18
@cyanbeam - Couldn't you add a tabIndex of -1? – thecoolmacdude Oct 19 '17 at 14:45
2

I suppose you may. I guess my point is that whatever you do to disable changing the field seems hack-ish and not semantically correct anyway. – sean Oct 24 '17 at 12:55

score 7 · Answer 7 · answered Jan 17 '19 at 12:45

7

If anyone wants to do it only from html, This works for me.

<input type="text" onkeydown="event.preventDefault()" required />

answered Jan 17 '19 at 12:45

Shabbir

273
4
7

A simple solution that simply works. – John Chidi May 21 '23 at 14:47

score 1 · Answer 8 · answered Jan 13 '13 at 17:42

I think this should help.

<form onSubmit="return checkIfInputHasVal()">
    <input type="text" name="formAfterRederict" id="formAfterRederict" size="50" required readonly="readonly" OnClick="choose_le_page();"  />
</form>

<script>
     function checkIfInputHasVal(){
        if($("#formAfterRederict").val==""){
             alert("formAfterRederict should have a value");
             return false;
        }
     }
</script>

score 1 · Answer 9 · answered Feb 14 '17 at 12:50

You can do this for your template:

<input required onfocus="unselect($event)" class="disabled">

And this for your js:

unselect(event){
    event.preventDefault();
    event.currentTarget.blur();
}

For a user the input will be disabled and required at the same time, providing you have a css-class for disabled input.

score 1 · Answer 10 · answered Apr 18 '17 at 21:34

Based on answer @KanakSinghal but without blocked all keys and with blocked cut event

$('.readonly').keydown(function(e) {
  if (e.keyCode === 8 || e.keyCode === 46)  // Backspace & del
    e.preventDefault();
}).on('keypress paste cut', function(e) {
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="readonly" value="test" />

P.S. Somebody knows as cut event translate to copy event?

Deadpool · Answer 11 · 2018-02-04T01:41:41.777

1

Required and readonly don't work together.

Although you can make two inputs like this:

<input id="One" readonly />
<input id="Two" required style="display: none" /> //invisible

And change the value Two to the value that´s inside the input One.

edited Feb 04 '18 at 01:41

answered Feb 04 '18 at 01:32

Deadpool

210
3
14

score 0 · Answer 12 · answered Nov 12 '20 at 19:33

I have the same problem, and finally I use this solution (with jQuery):

form.find(':input[required][readonly]').filter(function(){ return this.value === '';})

In addition to the form.checkValidity(), I test the length of the above search somehow this way:

let fcnt = $(form)
    .find(':input[required][readonly]')
    .filter(function() { return this.value === '';})
    .length;

if (form.checkValidity() && !fcnt) {
   form.submit();
}

score -1 · Answer 13 · answered Aug 03 '17 at 15:51

-1

  function validateForm() {
    var x = document.forms["myForm"]["test2"].value;
    if (x == "") {
      alert("Name missing!!");
      return false;
    }
  }

  <form class="form-horizontal" onsubmit="return validateForm()" name="myForm" action="" method="POST">
   <input type="text"  name="test1">
    <input type="text" disabled name="test2">
    <button type="submit">Submit</button>
</form>

answered Aug 03 '17 at 15:51

Ibrahim Muriithi

1

Some explanation to support your answer please. Code only answers are not very educational. – Gnqz Aug 03 '17 at 16:05

score -1 · Answer 14 · answered Mar 31 '23 at 09:05

-1

It's the best solution for me. The client can not type anything and must be filled

<input type="text" class="read-only" required>
.read-only {
         pointer-events: none;
 }

answered Mar 31 '23 at 09:05

Melisa

310
2
16

HTML required readonly input in form

14 Answers14

Linked