4

Gostaria de saber como faço para validar um campo nome, para aceitar:

  • Letras (Maiúsculas e Minúsculas)
  • Números
  • Espaços
  • Máximo 30 caracteres
  • Não pode haver espaço duplo
  • Não pode haver espaço no início e no fim (Como no Fim o sobre nome terá que ter espaço, então não será necessário, pois validarei com trim posteriormente)

Código

$("[name=nome_p]").keyup(function() {
        var $this = $( this ); //armazeno o ponteiro em uma variavel
        var valor = $this.val().replace(/[^a-z0-9 ]+/gi,'');
        $this.val( valor );
});

3 Respostas 3

1

Nos inputs use o atributo maxlength com valor igual a 30

<input type="text" maxlength="30" name="nome_p" value="" />

para retirar espaços duplos no script acrescente

valor = valor.replace(/( )+/g, ' ');

$("[name=nome_p]").keyup(function () { 
    	var $this = $( this ); //armazeno o ponteiro em uma variavel
		    var valor = $this.val().replace(/[^a-z0-9 ]+/gi,'');
		    valor = valor.replace(/( )+/g, ' ');
		    $this.val( valor );
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type="text" maxlength="30" name="nome_p" value="" />

Outra opção no script acrescente

while (valor.indexOf(' ') != -1) valor = valor.replace(' ', ' ');

    $("[name=nome_p]").keyup(function () { 
    	var $this = $( this ); //armazeno o ponteiro em uma variavel
		    var valor = $this.val().replace(/[^a-z0-9 ]+/gi,'');
		    while (valor.indexOf('  ') != -1) valor = valor.replace('  ', ' ');
		    $this.val( valor );
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type="text" maxlength="30" name="nome_p" value="" />

1

Expressão regular

/^[a-z\d](?:[a-z\d]| (?! |$)){0,29}$/i

Significado

  • ^ - Circunflexo que casa o começo da cadeia de caracteres.
  • [a-z\d] - Lista que casa uma letra ou um número (para não permitir espaços no início).
  • (?:[a-z\d]| (?! |$)){0,29} - Este é um grupo que é repetido entre 0 a 29 vezes, casando um caracter das duas alternativas:
    • [a-z\d] - letra ou número.
    • (?! |$) - espaço que não é seguido por outro espaço ou o fim da cadeia (usa um lookahead negativo).
  • $ - Fim da cadeia.
  • /i - maiúsculas e minúsculas.

Exemplo

$(function() {
    let er = /^[a-z\d](?:[a-z\d]| (?! |$)){0,29}$/i;
    
    $("#nome_p").on("input", function() {
        if (er.test($(this).val())) {
            // ✔️ válido
            $(this).removeClass("invalido");
        } else {
            // ✖️ inválido
            $(this).addClass("invalido");
        }
    });
});
input.invalido:focus {
    border: 2px dashed red;
    background-image: url(https://i.stack.imgur.com/NAJqp.png);
    background-position: right top;
    background-repeat: no-repeat;
}
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HTML -->
<input type="text" id="nome_p" name="nome_p">



Atributo pattern em HTML5 (sem Javascript)

Em HTML5 você pode usar o atributo pattern de um elemento <input> (Veja a compatibilidade).

<input pattern="Expressão regular" title="mensagem de erro">


Código

input[type="text"]:required:invalid,
input[type="text"]:focus:invalid {
    border: 2px dashed red;
    background-image: url(https://i.stack.imgur.com/NAJqp.png);
    background-position: right top;
    background-repeat: no-repeat;
}

input[type="text"]:valid {
    border: 2px solid black;
    background-image: url(https://i.stack.imgur.com/X6zP2.png);
    background-position: right top;
    background-repeat: no-repeat;
}
<form>
    <input type="text"
           placeholder="Nome" 
           pattern="[A-Za-z\d](?:[A-Za-z\d]| (?! |$)){0,29}" 
           title="• Letras&#10;• Números&#10;• Espaços&#10;• Máximo 30 caracteres&#10;• Não pode haver espaço duplo&#10;• Não pode haver espaço no início e no fim" 
           required
           >
    <input type="submit">
</form>

-1

Para limitar o tamanho use o atributo maxlength="30" da tag input, para remover os espaços no começo e no final da string é melhor você usar uma função trim no lado servidor ou onde seja que você recebe esse dado, e para permitir apenas os caracteres que você descreveu é melhor usar a função keypress e retornar false caso não atenda as suas condições.

Acredito que algo parecido com isso possa ajudar:

$(document).ready(function() {
  $("[name=nome_p]").keypress(function(e) {
    var char = String.fromCharCode(e.which);
    var value = $(this).val();

    if (!/[a-z0-9 ]+/gi.test(char)) {
      return false;
    }

    if (value.substr(value.length - 1) === ' ') {
      return false;
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>


<input type="text" name="nome_p" maxlength="30" />

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .