HTML - Como puedo hacer que el usuario escriba dos palabras como máximo

 
Vista:

Como puedo hacer que el usuario escriba dos palabras como máximo

Publicado por Alejandro Carrazoni Entenza (1 intervención) el 18/09/2022 19:32:49
Hola, buenos días, quería preguntar como puedo hacer para que el usuario de mi página web (html) en el campo de Nombre y primer apellido, escriba solo dos palabras como máximo.
Enunciado: Un campo de texto llamado cname para que el usuario introduzca su nombre y su primer apellido. Debe consistir de dos palabras, y cada una de las palabras de al menos 3 caracteres.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Ivan

Como puedo hacer que el usuario escriba dos palabras como máximo

Publicado por Ivan (56 intervenciones) el 21/09/2022 10:56:51
Hola,

la idea es filtrar el campo del formulario por palabras y para ello podemos usar la función split(' '). Si hay más de 2 espacios entonces hay tres palabras. Después filtramos cada palabra y comprobamos si tiene más de 3 caracteres.

El código básico y que puedes adaptar a tus necesidades sería algo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
<script>
function filtrar(element) {
	let texto = element.value.split(' ');
	if (texto.length > 2) {
		alert('ERROR: Sólo se permiten dos palabras por campo');
		return;
	}
	for (let i=0; i<texto.length; i++) {
		if (texto[i].length > 3) {
			alert('ERROR: Sólo se permiten tres caracteres por palabra');
			return;
		}
	}
}
</script>
</head>
<body>
	<h3>Filtrar campo</h3>
	<p class="contadores">Ejemplo de filtrado de campo de formulario</p>
	<input type="text" id="nombre" value="" oninput="filtrar(this)">
	<input type="text" id="apellido" value="" oninput="filtrar(this)">
</body>
</html>

Espero que te sirva, un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 247
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Como puedo hacer que el usuario escriba dos palabras como máximo

Publicado por Alejandro (100 intervenciones) el 21/09/2022 22:38:38
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
1
2
3
4
5
6
7
8
9
<style>
	input:invalid {
		border: 2px solid red;
	}
</style>
<form method="post">
	Nombre: <input type="text" name="cname" pattern="(^\w{3,}$|^\w{3,}\s\w{3,}$)" />
	<button>Enviar</button>
<form>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar