title: Readonly and Required on one input field
body: <p>For a webapp i'm currently developping, i need to hide the standard IOS keyboard when focusing on a textbox.</p>
  
  <p>This can be done simply by adding the 'readonly' tag, and opening my custom input using a onClick function.</p>
  
  <pre><code>    &lt;form method="post" action="" enctype="multipart/form-data"&gt;
        &lt;input type="text" id="test123" onClick="doSomething();" readonly required /&gt;
        &lt;button type="submit" value="submit"&gt;
          Save
        &lt;/button&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/fmu87bvL/2/" rel="nofollow noreferrer">(JSFiddle)</a></p>
  
  <p>This works. Partially. By enabling the readonly i'm able to keep the keyboard hidden. But, another problem rises. When using the readonly, 'required' is not called. You can submit the form with an empty field, because its assumed a readonly field contains what it has to contain.</p>
  
  <p>How can we possibly keep the readonly, and the required? We can't. We need a workaround.</p>
  
  <p>Edit:</p>
  
  <p>In regards to the possible duplicate.
  The answer in <a href="https://stackoverflow.com/questions/12777751/html-required-readonly-input-in-form">THIS</a> post is to add JQuery readonly with preventDefault. The problem with this is, that on ios devices the keyboard will stil open, which is ultimately our goal. The keyboard must not open, and still it should be a required field. In theorie, i think this can be achieved using Javascript validation. But that means, my submit button will be calling a js function, while it has to be calling our php function to submit our data.</p>