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

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

Answer 2

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.

Answer 3

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.

Answer 4

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?

Answer 5

  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>

Answer 6

Remove readonly and use function

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

It works as you want.