Readonly and Required on one input field - html

Question

For a webapp i'm currently developping, i need to hide the standard IOS keyboard when focusing on a textbox.
This can be done simply by adding the 'readonly' tag, and opening my custom input using a onClick function.
<form method="post" action="" enctype="multipart/form-data">
<input type="text" id="test123" onClick="doSomething();" readonly required />
<button type="submit" value="submit">
Save
</button>
</form>
(JSFiddle)
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.
How can we possibly keep the readonly, and the required? We can't. We need a workaround.
Edit:
In regards to the possible duplicate.
The answer in THIS 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.

Answer 1

Here's how i solved this problem. I tried to make a JS validator, as simple as possible.
$('#dataInput').submit(function (e) { //Form is submitted, it calls this function automatically
var empty = 0;
$('input[type=text]').each(function(){ //Check each input (had to be done like this, because i dont know the amount of input beforehand)
if (this.value == "") { //The textbox is empty
empty++;
}
})
if(empty === 0){ //No empty textboxes
}else{
alert(empty + ' empty input(s)'); //There are empty textboxes
e.preventDefault(); //Prevent the submit from happening
}
});
You can check out the fiddle here

Answer 2

You can set and remove READONLY before enter or leave the field.
$(".datepicker").on("touchstart", function(e) {
$(".datepicker").attr("readonly", "readyonly")
})
$(".datepicker").on("blur", function(e) {
$(".datepicker").removeAttr("readonly")
})

Answer 3

First Approach: You can assign a dummy value and then check in the backend whether the value is changed or not, if it is not changed, you can show an error message. Other wise save into database.
<form method="post" action="" enctype="multipart/form-data">
<input type="text" value="dummy" id="test123" onClick="doSomething();"
readonly required />
<button type="submit" value="submit">
Save
</button>
</form>
Second approach: when you fire the onclick event of the input field, you can remove the readonly attribute using the following code.
function doSomething()
{
$("#test123"). removeAttr("readonly");
}