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
– Muleskinner, Commented Oct 8, 2012 at 8:22
You should mark your question with the HTML5 tag and Chrome tag — Muleskinner
– Muleskinner, Commented Oct 8, 2012 at 8:28
@Muleskinner: It's supported by the stable versions of Firefox, Chrome and Opera: caniuse.com/#search=required — Blender
– Blender, Commented Oct 8, 2012 at 8:30
@Blender, thanks for the website, i bookmarked it right away :D — Mathlight
– Mathlight, Commented Oct 8, 2012 at 8:36

Kanak Singhal · Accepted Answer · 2021-02-17 06:20:10Z

120

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, 2021 at 6:20

answered Sep 5, 2014 at 22:18

Kanak Singhal

3,3221 gold badge21 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Ed Bayiates Over a year ago

I also added a paste handler to preventDefault, and the solution was complete!

Anton Shchyrov Over a year ago

Good answer, but his blocked ALL keys (included Tab, Left, Right) and not blocked Cut event. I wrote self version :)

Carmoreno Over a year ago

Thanks a lot! @Kanak your answer was useful for me.

appel Over a year ago

The fix for number input is adding a 'mousedown' handler.

Peter Mghendi Over a year ago

I added the focus handler to avoid autocomplete and showing the cursor.

|

BenM · Accepted Answer · 2012-10-08 08:24:27Z

34

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

answered Oct 8, 2012 at 8:24

BenM

53.3k26 gold badges116 silver badges172 bronze badges

6 Comments

Mathlight Over a year ago

And you don't know an work around? because i want to check it before the form is realy submitted...

Mathlight Over a year ago

@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...

BenM Over a year ago

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.

ajbraus Over a year ago

@yogi with a datepicker modal . . .

Rob Grant Over a year ago

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.

|

Parth Patel · Accepted Answer · 2017-12-29 10:01:13Z

28

Remove readonly and use function

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

It works as you want.

answered Dec 29, 2017 at 10:01

Parth Patel

8391 gold badge13 silver badges21 bronze badges

2 Comments

Sanjoy Kanrar Over a year ago

can not handle delete content when backspace button it clicked.

thanos.a Over a year ago

Is there a way to get rid of the cursor ? maybe focus on some else? is it possible ?

Yevgeniy Afanasyev · Accepted Answer · 2019-11-26 23:21:18Z

22

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, 2019 at 23:21

answered Feb 1, 2019 at 2:01

Yevgeniy Afanasyev

42k30 gold badges186 silver badges211 bronze badges

Comments

user2428118 · Accepted Answer · 2012-10-08 08:43:36Z

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 8, 2012 at 8:43

answered Oct 8, 2012 at 8:28

user2428118

8,1344 gold badges47 silver badges74 bronze badges

Comments

Udara Seneviratne · Accepted Answer · 2017-02-15 18:50:38Z

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, 2017 at 18:50

Udara Seneviratne

2,5431 gold badge39 silver badges54 bronze badges

4 Comments

Mathlight Over a year ago

This seems pretty neat. What do you know about the browser support for this css trick?

sean Over a year ago

This doesn't prevent anyone from tabbing into the field and typing some text.

thecoolmacdude Over a year ago

@cyanbeam - Couldn't you add a tabIndex of -1?

sean Over a year ago

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.

Shabbir · Accepted Answer · 2019-01-17 12:45:34Z

8

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

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

answered Jan 17, 2019 at 12:45

Shabbir

2834 silver badges8 bronze badges

1 Comment

John Chidi Over a year ago

A simple solution that simply works. 👍

scireon · Accepted Answer · 2013-01-13 17:42:19Z

1

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>

answered Jan 13, 2013 at 17:42

scireon

3952 gold badges4 silver badges17 bronze badges

Comments

Alex Link · Accepted Answer · 2017-02-14 12:50:25Z

1

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.

answered Feb 14, 2017 at 12:50

Alex Link

1,24013 silver badges16 bronze badges

Comments

Anton Shchyrov · Accepted Answer · 2017-04-18 21:34:33Z

1

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?

answered Apr 18, 2017 at 21:34

Anton Shchyrov

2953 silver badges16 bronze badges

Comments

Deadpool · Accepted Answer · 2018-02-04 01:41:41Z

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 4, 2018 at 1:41

answered Feb 4, 2018 at 1:32

Deadpool

2043 silver badges14 bronze badges

Comments

Melisa · Accepted Answer · 2023-03-31 09:05:59Z

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, 2023 at 9:05

Melisa

4526 silver badges18 bronze badges

Comments

CsZsombor · Accepted Answer · 2020-11-12 19:33:48Z

0

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();
}

answered Nov 12, 2020 at 19:33

CsZsombor

691 silver badge4 bronze badges

Comments

Ibrahim Muriithi · Accepted Answer · 2017-08-03 15:51:17Z

-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 3, 2017 at 15:51

Ibrahim Muriithi

1

1 Comment

Gnqz Over a year ago

Some explanation to support your answer please. Code only answers are not very educational.

Collectives™ on Stack Overflow

HTML required readonly input in form

14 Answers 14

9 Comments

6 Comments

2 Comments

Comments

Comments

4 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

14 Answers 14

9 Comments

6 Comments

2 Comments

Comments

Comments

4 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Linked

Related