Duda sobre como validar en javascript
Publicado por javier (4 intervenciones) el 28/04/2022 00:43:44
Hola queria saber como poder validar un formulario . Porque yo estoy intentado hacerlo en un ejercicio pero no me sale y quiero saber como validar
Aqui esta la pregunta
Usando las pseudoclases de CSS3 valid e invalid realiza el
siguiente ejercicio:
1. Crea una capa centrada tanto horizontal como verticalmente
2. Ponle un borde de color azul claro con las esquinas redondeadas
3. Ponle un color de fondo con un degradado
4. Incorpora un campo email. El email solo puede ser del dominio
iesdoctorbalmis.com
5. Incorpora un campo contraseña. La contraseña validará solo si tiene 8
dígitos, no puede contener caracteres.
6. Ponles un color de fondo gris si validan con una sombra de un tono gris
más oscura sólo en el lateral derecho y en la parte inferior
7. Ponles un color rojo claro si no validan y la sombra de un tono rojo más
oscura en el lateral izquierdo y en la parte superior
JS - DOM
8. Incorpora un botón enviar
Mi codigo
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Ejer3.css">
<title>Document</title>
</head>
<body>
<main>
<form>
<label>Introduce un correo electronico</label><input id ="email" placeholder="iesdoctorbalmis.com" required type="email"/>
<input type="submit" />
</form>
</main>
<script src="Ejer3.js"></script>
</body>
</html>
CSS
.valido
{
background-color: green;
}
.invalido
{
background-color: red;
}
javascript
'use strict';
document.querySelector("input[type='submit']").addEventListener("click",function(event){
let Email = document.querySelector("#email");
let nombre = document.querySelector("")
let patron = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/
if(patron.test(Email.value))
telefono.className = "valido"
else
telefono.className = "invalido"
if(patronNombre.test(Email.textContent))
nombre.className = "valido"
else {
nombre.className = "invalido"
}
event.preventDefault();
})
Aqui esta la pregunta
Usando las pseudoclases de CSS3 valid e invalid realiza el
siguiente ejercicio:
1. Crea una capa centrada tanto horizontal como verticalmente
2. Ponle un borde de color azul claro con las esquinas redondeadas
3. Ponle un color de fondo con un degradado
4. Incorpora un campo email. El email solo puede ser del dominio
iesdoctorbalmis.com
5. Incorpora un campo contraseña. La contraseña validará solo si tiene 8
dígitos, no puede contener caracteres.
6. Ponles un color de fondo gris si validan con una sombra de un tono gris
más oscura sólo en el lateral derecho y en la parte inferior
7. Ponles un color rojo claro si no validan y la sombra de un tono rojo más
oscura en el lateral izquierdo y en la parte superior
JS - DOM
8. Incorpora un botón enviar
Mi codigo
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Ejer3.css">
<title>Document</title>
</head>
<body>
<main>
<form>
<label>Introduce un correo electronico</label><input id ="email" placeholder="iesdoctorbalmis.com" required type="email"/>
<input type="submit" />
</form>
</main>
<script src="Ejer3.js"></script>
</body>
</html>
CSS
.valido
{
background-color: green;
}
.invalido
{
background-color: red;
}
javascript
'use strict';
document.querySelector("input[type='submit']").addEventListener("click",function(event){
let Email = document.querySelector("#email");
let nombre = document.querySelector("")
let patron = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/
if(patron.test(Email.value))
telefono.className = "valido"
else
telefono.className = "invalido"
if(patronNombre.test(Email.textContent))
nombre.className = "valido"
else {
nombre.className = "invalido"
}
event.preventDefault();
})
Valora esta pregunta
0
