Force the User to enter a minimum number of characters

Question

I have in my form the date field that forces the user to only numbers and if other options are not selected he returns an Alert. But my doubt relates to the field date already quoted. As I force the user to enter the 8 numbers of the date, and if you do not type, when giving Submit, it will return some error as an Alert?

Follow what I have ready until agr:

function formatar(mascara, documento){
  var i = documento.value.length;
  var saida = mascara.substring(0,1);
  var texto = mascara.substring(i);
  if (event.keyCode < 48 || event.keyCode > 57) {
    event.returnValue = false;
  }
  
  if (texto.substring(0,1) != saida){
            documento.value += texto.substring(0,1);
  }
  
}

<form class="got" method="GET" action="Dia_rtd.php" name="troca" onsubmit="return verifica()">

                <input type="text" maxlength="10" placeholder="Data" name="Data_dd" OnKeyPress="formatar('##/##/####', this)" style="width:70px;"/> 
 <button class="css_btn_class" type="submit">Atualizar</button>
    </form>

Answer 1

I’ll post an answer only with CSS sometimes can help you.

First, if you can change the type of input of text for date use the attributes min="2017-01-01" or max="2200-12-31" to delimit how far your date can go.

If the user does not meet the CSS field requirements input:invalid will put a red border on input, see in the example below (this validation is only on the client side, I do not know if it meets in your case)

input:invalid {
    border: 1px solid red;
}

<form class="got" method="GET" action="Dia_rtd.php" name="troca" onsubmit="return verifica()">
    <input type="date" min="2017-01-01" max="2200-12-31" placeholder="Data" name="Data_dd" OnKeyPress="formatar('##/##/####', this)" style="width:170px;"/>  
    <button class="css_btn_class" type="submit">Atualizar</button>
</form>

OBS: You can still use title="O ano deve ter 4 dígitos" and x-moz-errormessage="O ano deve ter 4 dígitos" to make like a Tooltip when the user puts the mouse on input

Reference to the Input Date: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/data

Answer 2

In addition to a function check, you can use the feature pattern HTML5 that will only accept in the numbers field and the bar "/" and with 10 characters in size:

pattern="[\d/]{10}"

In the function you check whether the string size is different from 10 and call a Alert:

function verifica(){
   var data_dd = document.querySelector("input[name='Data_dd']").value;
   if(data_dd.length != 10){
       alert("Data inválida");
       return false;
   }
}

function formatar(mascara, documento){
  var i = documento.value.length;
  var saida = mascara.substring(0,1);
  var texto = mascara.substring(i);
  if (event.keyCode < 48 || event.keyCode > 57) {
    event.returnValue = false;
  }
  
  if (texto.substring(0,1) != saida){
            documento.value += texto.substring(0,1);
  }
  
}

<form class="got" method="GET" action="Dia_rtd.php" name="troca" onsubmit="return verifica()">
    <input pattern="[\d/]{10}" type="text" maxlength="10" placeholder="Data" name="Data_dd" OnKeyPress="formatar('##/##/####', this)" style="width:70px;"/> 
     <button class="css_btn_class" type="submit">Atualizar</button>
</form>

Answer 3

I used a very simple regular expression function to check if the date is in the correct format, if it is sending the form, otherwise it will not send. Follows the code

function formatar(mascara, documento) {
  var i = documento.value.length;
  var saida = mascara.substring(0, 1);
  var texto = mascara.substring(i);
  if (event.keyCode < 48 || event.keyCode > 57) {
    event.returnValue = false;
  }
  if (texto.substring(0, 1) != saida) {
    documento.value += texto.substring(0, 1);
  }
}

function salvar() {
  value = document.getElementById("data").value;
  re = /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/;
  if(re.test( value )){
    alert('Data válida');
    document.troca.submit();
  }else{
    alert('Data inválida');
  }
}

<form id="myForm" class="got" method="GET" action="Dia_rtd.php" name="troca" onsubmit="verifica(this)">

  <input id="data" type="text" maxlength="10" placeholder="Data" name="Data_dd" OnKeyPress="formatar('##/##/####', this)" style="width:70px;" />
  <button class="css_btn_class" type="submit" onclick="salvar(); return false;">Atualizar</button>
</form>