Require the User to enter a minimum number of characters

Question

Require the User to enter a minimum number of characters

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (2 votes)

1

I have in my form the date field that forces the user to just numbers and if other options are not selected it returns an alert. But my doubt is referring to the date field already quoted. How do I force the user to enter the 8 numbers of the date, and if he does not type, when giving submit, will he return an error as an alert?

Here's what I've got ready for 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>

javascript html

asked by anonymous 01.02.2018 / 14:07

3 answers

2

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

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

In the function you check if the string size is different from 10 and call an 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>

01.02.2018 / 14:32

2

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. Follow 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>

01.02.2018 / 14:39

How to organize an Array by Date order? arrays equality in Java Script [duplicate]

score 2 · Accepted Answer

I will post a response with CSS only sometimes it can help.

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

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

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>

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

Input Reference: link