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 autofi

Answer 1

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

Answer 2

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

Answer 3

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

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

Answer 4

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.

Answer 5

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>

Answer 6

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:

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

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

EDIT

as @Ed Bayiates pointed in the comment you can also add paste handler to preventDefault like this:

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

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