Impose minimum number of characters typed in an input [closed]

-1

I tried several methods but I could not until now, some even worked, but they went wrong when they came across my JavaScript mask that automatically adds "/" to the "Birth Date" field. How do I do this?

 <?
    //require "conn.php";
    include "folha.css";
    include "funcao.php";
    //<input type="date" class="campocadastro" name="datanascimento" placeholder="Data de Nascimento" required value/> 
?>

<html>

<head>
    <link rel="icon" href="imagem/iconesaggin.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="imagem/iconesaggin.ico" type="image/x-icon" />

    <title> Login </title>
</head>

<body>

    <div>
        <form name="cadastro" method="post" align="center">
                <br> <br> <br> <br> <br>
            <a href="home.php"> <img src="imagem/logosaggin.png" width="250" height="150"/></a>
                <br> <br> <br> <br> <br> <br>
            <input type="text" class="camponome" name="nome" placeholder="Nome" required value/>
            <input type="text" class="camposobrenome" name="sobrenome" placeholder="Sobrenome" required value/>
                <br> <br> 
            <input type="text" class="campocadastro" name="datanascimento" placeholder="Data de Nascimento" OnKeyUp="mascaraData(this);" maxlength="10" onkeypress='return SomenteNumero(event)' required value/>
                <br> <br> 
            <input type="email" class="campocadastro" name="email" onkeyup="minuscula(this)" maxlength="100" placeholder="E-mail" required value/>
                <br> <br>
            <input type="password" class="campocadastro" name="senha" onkeyup="minuscula(this)" placeholder="Senha" maxlength="20" required value/>
                <br> <br>
            <input type="submit" class="botaocadastro" value="Cadastrar"/>
        </form>
    </div>
</body>

</html>


    <script language="JavaScript" type="text/javascript">
    function mascaraData(campoData)
    {
        var datanascimento = campoData.value;
        if (datanascimento.length == 2)
        {
            datanascimento = datanascimento + '/';
            document.forms[0].datanascimento.value = datanascimento;

            return true;              
        }

        if (datanascimento.length == 5)
        {
          datanascimento = datanascimento + '/';
          document.forms[0].datanascimento.value = datanascimento;

            return true;
        }
    }
</script>
    
asked by anonymous 15.04.2017 / 05:25

1 answer

1

Assuming you can use jQuery:

You should use the change event, which fires when the field loses focus. So you know if the user has put the minimum amount of characters in the field or not.

So:

<input id="data-nascimento" type="text" name="datanascimento" etc., etc>

Notice that there is now a id attribute for the field.

var tamanhoMinimo = 8; // Ou qualquer outro valor arbitrário
$("#data-nascimento").on("change", function () {
    var valorSemBarras = ($(this).val() + "").replace("/", "");
    if (valorSemBarras.length < tamanhoMinimo) {
        alert("Sua data de nascimento é inválida.");
        // aqui você pode desabilitar o envio do formulário se desejar.
    } else {
        // aqui você pode reabilitar o envio do formulário.
    }
});
    
15.04.2017 / 14:42