Readonly and Required on one input field

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.

Possible duplicate of [HTML required readonly input in form](https://stackoverflow.com/questions/12777751/html-required-readonly-input-in-form) — Ismail Farooq, Jul 11 '18 at 10:04

score 1 · Answer 1 · answered Jul 11 '18 at 12:05

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

score 0 · Answer 2 · edited Jan 12 '22 at 19:00

0

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

edited Jan 12 '22 at 19:00

Ruli

2,592
12
30
40

answered Jul 11 '18 at 11:44

Ali

746
1
7
17

Whats the point in removing the readonly onClick? Will it not still open the ios keyboard? Also, if the user entered a wrong value, he'll have to click on the textbox again which will then open the keyboard cause the readonly is gone – Joppe De Cuyper Jul 11 '18 at 11:45
when you submit the form you want to required attribute work? so here is the trick, when you mouse over on submit button, you can remove the readonly attribute. but this is probabilistic solution. he might not submit the form at this time. – Ali Jul 11 '18 at 14:27

score 0 · Answer 3 · edited Jan 12 '22 at 18:59

0

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")
})

edited Jan 12 '22 at 18:59

Ruli

2,592
12
30
40

answered Jan 12 '22 at 15:35

Claus-Christian Ude

1

Readonly and Required on one input field

3 Answers3