Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML required readonly input in form

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?

like image 552
Mathlight Avatar asked Oct 08 '12 08:10

Mathlight


People also ask

How do I make inputs readonly in HTML?

The readonly attribute is a boolean attribute. When present, it specifies that an input field is read-only. A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).

How do I fill in a read only form?

Click Review > Restrict Editing. Under Editing restrictions, check Allow only this type of editing in the document, and make sure the list says No changes (Read only).

Does readonly input get submitted?

A readonly element is just not editable, but gets sent when the according form submits. A disabled element isn't editable and isn't sent on submit.

How do I disable editing in input tag?

You can either use the readonly or the disabled attribute. Note that when disabled, the input's value will not be submitted when submitting the form. Also It's important to remind that even using readonly attribute, you should never trust user input which includes form submissions.


2 Answers

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> 
like image 104
Kanak Singhal Avatar answered Oct 14 '22 08:10

Kanak Singhal


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

like image 32
BenM Avatar answered Oct 14 '22 10:10

BenM