Ir ao conteúdo
  • Cadastre-se
Regras do Clube do Hardware

Javascript A propriedade validity do js retorna falso em tudo.

Wagner Leandro

Por Wagner Leandro
em Web e banco de dados

 Compartilhar

Posts recomendados

Wagner Leandro
 

Wagner Leandro

Postado
Postado 
<!DOCTYPE html>
<html lang="pt-br">
<head>
	<title>Site</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<div class="containerFather">
	<div class="containerSon">
		<div class="loginImg">
			<img src="svg/undraw_secure_login_pdn4.svg">
		</div>
		<form method="POST" action="k.php" class="login">
			<div class="nameLogin">
				<h1>LOGIN</h1>
			</div>
			<div class="msgError">
				<p>Email e/ou senha inválidos</p>
			</div>
			<div class="input email">
				<p>Email</p>
				<input type="email">	
			</div>
			<div class="input senha">
				<p>Senha</p>
				<input type="password">
			</div>
			<div class="help">
				<a rel="noopener" rel="noreferrer" target="_blank" href="https://instagram.com/wagner_leandro0">Criar conta.</a>
				<a href="_blank">Esqueci a senha.</a>
			</div>
			<div class="submitBtn">
				<input type="submit" value="Entrar">
			</div>
		</form>
	</div>
</div>

<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
	body{
		margin: 0px;
		padding: 0px;
		font-family: sans-serif;
	}
	.containerFather{
		width: 100%;
		height: 100vh;
		display: flex;
		background: #e3e3e3;
		justify-content: center;
		align-items: center;
	}
	.containerSon{
		width: 70%;
		height: auto;
		display: flex;
		justify-content: center;
		flex-direction: row;
		align-items: center;
		background: #fff;
		/*padding: 2em 1em;*/
		border-radius: 10px;
		box-shadow: #cccccc 5px 9px 11px 0px;
	}
	.containerSon .loginImg{
		width: 60%;
		height: 100%;
		/*background: #848484;*/
		border-radius: 10px 0 0 10px;
		padding: 2em 1em;
		border-right: 2px solid black;
	}
	.containerSon .loginImg img{
		width: 100%;
	}
	.containerSon .login{
		width: 40%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		margin: 0.2rem 0rem;
		padding: 2em 1em;
	}
	.login .input{
		width: 70%;
		margin: 0.3em 0em;
		border: 2px solid;
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: .7em;
	}
	.input p{
		font-size: 1em;
		font-weight: 500;
		color: #929292;
		margin: 0em 0em 0em 0em;
	}
	.input p.atived{
		margin: -3.2em 0em 0em 0em;
		color: black;
		padding: 0em 0.3em;
		background: white;
		transition: .1s; 
		position: absolute;
		font-size: .9em;
	}
	.input input{
		width: 100%;
		text-align: center;
		font-size: 1em;
		border: none;
		outline: none;
		display: none;
	}
	.nameLogin{
		margin: 0em 0em 1.5em 0em;
		font-family: sans-serif;
		letter-spacing: 0px;
		font-weight: bold;
	}
	.nameLogin h1{
		font-size: 2.1em;
	}
	.help{
		width: 70%;
		display: flex;
		justify-content: space-between;
	}
	.help a{
		font-size: 0.875em;
		text-decoration: underline;
		color: #989898;
	}
	.submitBtn{
		width: 50%;
		display: flex;
		justify-content: center;
		margin: 1.5em 0em 0em 0em;
	}
	.submitBtn input{
		width: 100%;
		padding: 1.3em .8em;
		font-size: 1em;
		border: none; 
		border-radius: 4px;
		color: white;
		background: linear-gradient(181deg, #00BFA6, #00e6ca);
	}
	.submitBtn input:hover{
		transition: .3s;
		cursor: pointer;
	}
	.msgError{
		width: 70%;
		padding: 0.7em 0.7em;
		/*display: flex;*/
		justify-content: center;
		border-radius: 5px;
		color: white;
		font-weight: 500;
		background: #00a791;
		margin: 0.3em 0em;
		animation: animationError .4s linear;
		transition: .1s linear;
		display: none;
	}
	.msgError.atived{
		display: flex;
	}
	@keyframes animationError{
		from{
			opacity: 0.1;
		}
		to{
			opacity: 1;
		}
	}
	@media only screen and (max-width: 1020px){
	.containerSon .loginImg{
		width: 50%;
	}
	.containerSon .login{
		width: 50%;
	}
	@media only screen and (max-width: 720px){
	.containerSon .loginImg{
		display: none;
	}
	.containerSon .login{
		width: 100%;
	}
	}
	@media only screen and (max-width: 480px){
	.containerSon .loginImg{
		
	}
	.containerSon .login{

	}
	}
	@media only screen and (max-width: 360px){
		
	}
</style>
<script type="text/javascript">
	onload = () => {
		const containerCampos = document.querySelectorAll('.input')
		// mensagem de erro
		const msgError = document.querySelector('.msgError')

		containerCampos.forEach((e) => {
			e.addEventListener('click', (ev) => {
				function ativedCampo() {
				e.children[1].style.display = 'block'
				e.children[1].focus()
				e.style.justifyContent = 'flex-start'
				e.children[0].classList.add('atived')
			}
			ativedCampo()

			})
			e.children[1].addEventListener('blur', () => {
				if(!e.children[1].value){
					function disableCampo() {
						e.children[1].style.display = 'none'
						e.style.justifyContent = 'center'
						e.children[0].classList.remove('atived')
					}
					if (e.classList[1] == 'email') {
						if (!e.children[1].value) {
							disableCampo()
						}
					}
					else if (e.classList[1] == 'senha') {
						if (!e.children[1].value || e.children.value.lenght<8) {
							disableCampo()
						}
					}
				}
				console.log(e.children[1].validity)
				let quantErr = 0
				for(err in e.children[1].validity){
					if (err != "valid") {
						if (e.children[1].validity[err]===true) {
							quantErr++
						}
					}
					// console.log(err, e.children[1].validity[err])
				}
				if (quantErr>=1) {
					if (msgError.classList[1] === undefined) {
						msgError.classList.add('atived')
					}
					e.parentNode.addEventListener('submit', (p) => {
						p.preventDefault()
					})

					let quantErr = 0
				}
				else if (quantErr==0) {
					if (msgError.classList[1] == 'atived') {
						console.log('ee')
						msgError.classList.remove('atived')
					}
					ativedCampo()

					let quantErr = 0
				}


			})
		})


	}
</script>

</body>
</html>

 

5 minutos atrás, Wagner Leandro disse: 

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<title>Site</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<div class="containerFather">
	<div class="containerSon">
		<div class="loginImg">
			<img src="svg/undraw_secure_login_pdn4.svg">
		</div>
		<form method="POST" action="k.php" class="login">
			<div class="nameLogin">
				<h1>LOGIN</h1>
			</div>
			<div class="msgError">
				<p>Email e/ou senha inválidos</p>
			</div>
			<div class="input email">
				<p>Email</p>
				<input type="email">	
			</div>
			<div class="input senha">
				<p>Senha</p>
				<input type="password">
			</div>
			<div class="help">
				<a rel="noopener" rel="noreferrer" target="_blank" href="https://instagram.com/wagner_leandro0">Criar conta.</a>
				<a href="_blank">Esqueci a senha.</a>
			</div>
			<div class="submitBtn">
				<input type="submit" value="Entrar">
			</div>
		</form>
	</div>
</div>

<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
	body{
		margin: 0px;
		padding: 0px;
		font-family: sans-serif;
	}
	.containerFather{
		width: 100%;
		height: 100vh;
		display: flex;
		background: #e3e3e3;
		justify-content: center;
		align-items: center;
	}
	.containerSon{
		width: 70%;
		height: auto;
		display: flex;
		justify-content: center;
		flex-direction: row;
		align-items: center;
		background: #fff;
		/*padding: 2em 1em;*/
		border-radius: 10px;
		box-shadow: #cccccc 5px 9px 11px 0px;
	}
	.containerSon .loginImg{
		width: 60%;
		height: 100%;
		/*background: #848484;*/
		border-radius: 10px 0 0 10px;
		padding: 2em 1em;
		border-right: 2px solid black;
	}
	.containerSon .loginImg img{
		width: 100%;
	}
	.containerSon .login{
		width: 40%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		margin: 0.2rem 0rem;
		padding: 2em 1em;
	}
	.login .input{
		width: 70%;
		margin: 0.3em 0em;
		border: 2px solid;
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: .7em;
	}
	.input p{
		font-size: 1em;
		font-weight: 500;
		color: #929292;
		margin: 0em 0em 0em 0em;
	}
	.input p.atived{
		margin: -3.2em 0em 0em 0em;
		color: black;
		padding: 0em 0.3em;
		background: white;
		transition: .1s; 
		position: absolute;
		font-size: .9em;
	}
	.input input{
		width: 100%;
		text-align: center;
		font-size: 1em;
		border: none;
		outline: none;
		display: none;
	}
	.nameLogin{
		margin: 0em 0em 1.5em 0em;
		font-family: sans-serif;
		letter-spacing: 0px;
		font-weight: bold;
	}
	.nameLogin h1{
		font-size: 2.1em;
	}
	.help{
		width: 70%;
		display: flex;
		justify-content: space-between;
	}
	.help a{
		font-size: 0.875em;
		text-decoration: underline;
		color: #989898;
	}
	.submitBtn{
		width: 50%;
		display: flex;
		justify-content: center;
		margin: 1.5em 0em 0em 0em;
	}
	.submitBtn input{
		width: 100%;
		padding: 1.3em .8em;
		font-size: 1em;
		border: none; 
		border-radius: 4px;
		color: white;
		background: linear-gradient(181deg, #00BFA6, #00e6ca);
	}
	.submitBtn input:hover{
		transition: .3s;
		cursor: pointer;
	}
	.msgError{
		width: 70%;
		padding: 0.7em 0.7em;
		/*display: flex;*/
		justify-content: center;
		border-radius: 5px;
		color: white;
		font-weight: 500;
		background: #00a791;
		margin: 0.3em 0em;
		animation: animationError .4s linear;
		transition: .1s linear;
		display: none;
	}
	.msgError.atived{
		display: flex;
	}
	@keyframes animationError{
		from{
			opacity: 0.1;
		}
		to{
			opacity: 1;
		}
	}
	@media only screen and (max-width: 1020px){
	.containerSon .loginImg{
		width: 50%;
	}
	.containerSon .login{
		width: 50%;
	}
	@media only screen and (max-width: 720px){
	.containerSon .loginImg{
		display: none;
	}
	.containerSon .login{
		width: 100%;
	}
	}
	@media only screen and (max-width: 480px){
	.containerSon .loginImg{
		
	}
	.containerSon .login{

	}
	}
	@media only screen and (max-width: 360px){
		
	}
</style>
<script type="text/javascript">
	onload = () => {
		const containerCampos = document.querySelectorAll('.input')
		// mensagem de erro
		const msgError = document.querySelector('.msgError')

		containerCampos.forEach((e) => {
			e.addEventListener('click', (ev) => {
				function ativedCampo() {
				e.children[1].style.display = 'block'
				e.children[1].focus()
				e.style.justifyContent = 'flex-start'
				e.children[0].classList.add('atived')
			}
			ativedCampo()

			})
			e.children[1].addEventListener('blur', () => {
				if(!e.children[1].value){
					function disableCampo() {
						e.children[1].style.display = 'none'
						e.style.justifyContent = 'center'
						e.children[0].classList.remove('atived')
					}
					if (e.classList[1] == 'email') {
						if (!e.children[1].value) {
							disableCampo()
						}
					}
					else if (e.classList[1] == 'senha') {
						if (!e.children[1].value || e.children.value.lenght<8) {
							disableCampo()
						}
					}
				}
				console.log(e.children[1].validity)
				let quantErr = 0
				for(err in e.children[1].validity){
					if (err != "valid") {
						if (e.children[1].validity[err]===true) {
							quantErr++
						}
					}
					// console.log(err, e.children[1].validity[err])
				}
				if (quantErr>=1) {
					if (msgError.classList[1] === undefined) {
						msgError.classList.add('atived')
					}
					e.parentNode.addEventListener('submit', (p) => {
						p.preventDefault()
					})

					let quantErr = 0
				}
				else if (quantErr==0) {
					if (msgError.classList[1] == 'atived') {
						console.log('ee')
						msgError.classList.remove('atived')
					}
					ativedCampo()

					let quantErr = 0
				}


			})
		})


	}
</script>

</body>
</html>

 

apertem em algum input e apertem fora(blur), assim vai rodar a função

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora
 Compartilhar
Ir à lista de tópicos

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

Mais

×
×
  • Criar novo...