Minha function não funciona

17/07/2019

0

HTML CSS JavaScript

Quero fazer uma function pra checar se os campos estão preenchidos e estou batendo a cabeça nisso.

Segue 
<html>
<head>
<title>Formulário</title>
<meta charset="utf-8">
<script language="javascript" type="text/javascript">
		
		function ChecarCampos() {

		var nome = document.form.nome;
		var snome = document.form.snome;
		var email = document.form.email;
		var emailconfirma = document.form.emailconfirma;
		var telefone = document.form.telefone;
		var cidade = document.form.cidade;
		var erro = "";
		var count = 0;

			if (nome.value == "")
			{
			
				erro += "\\nPreencha o campo nome";
			count = count + 1
			}


			if (snome.value == "")
			{
				erro += "\\nPreencha o campo sobrenome";
				count += 1
			}

			if (email.value == "") 
			{
				erro += "\\nPreencha o campo e-mail";
				count = count + 1
			}

			if (emailconfirma.value = "") 
			{
			erro += "\\nPreencha o campo confirma e=mail";
				count += 1
			}

			if (telefone.value == "") 
			{
				erro += "\\nPreencha o campo telefone";
				count += 1
			}

			if (cidade.value == "") 
			{
				erro += "\\nPreencha o campo cidade";
				count += 1
			}

				if (count > 0) 
			{
					alert("Os seguintes erros foram encontrador:\\n" + erro);
				return false
			}
		}

		</script>


</head>
<body>
	<style type="text/css">

.fieldset {
	border: 0;
}

.body, .input, .select, .textarea, .button {
	font-family: sans-serif;
	font-size: 1em;
}

.grupo:before, .grupo:after {
	content: " ";
	display: table;
}

.grupo:after {
	clear: both;
}

.campo {
	margin-bottom: 1em;
}

.campo label {
	margin-bottom: 0.2em;
	color: #666;
	display: block;
}

.grupo .campo {
	float: left;
	margin-right: 1em;
}

.campo input[type="text"], .campo .input[type="email"], .campo .input[type="url"],
	.campo input[type="tel"], .campo .select, .campo .textarea {
	padding: 0.2em;
	border: 1px solid #CCC;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
	display: block;
}

.campo .select .option {
	padding-right: 1em;
}

.campo .input:focus, .campo .select:focus, .campo .textarea:focus {
	background: #FFC;
}

.campo .label.checkbox {
	color: #000;
	display: inline-block;
	margin-right: 4em;
}


	</style>

		</head>
		<body> 


	</script>

	<form action="" method="post">
		
			<fieldset class="grupo">
				<legend><h1>Formulário de Cadastro</h1></legend>
				<div class="campo">
					<label for="nome">Nome</label> <input type="text"
						placeholder="Digite seu nome" id="nome" name="nome"
						style="width: 10em" value="">
				</div>
				<div class="campo">
					<label for="snome">Sobrenome</label> <input type="text"
						placeholder="Último nome" id="snome" name="snome"
						style="width: 10em" value="">
				</div>
			</fieldset>
			<fieldset>
			<div class="campo">
				<label>Sexo</label>Masculino<label> <input type="radio" name="sexo"
				value="masculino"> 
			</label>Feminino<label> <input type="radio" name="sexo" value="feminino"></fieldset>
				
			
		<fieldset>
		</div>
		<div class="campo">
			<label for="email">E-mail</label> <input type="text"
				placeholder="Digite seu e-mail" id="email" name="email"
				style="width: 20em" >
		</div>
		<div class="campo">
			<label for="emailconfirma">Confirme e-mail</label> <input type="text"
				placeholder="Digite novamente seu e-mail" id="emailconfirma" name="emailconfirmar"
				style="width: 20em">
		</div>
		</fieldset>
		<fieldset>
		<div class="campo">
			<label for="telefone">Telefone</label> <input type="text"
				placeholder="Digite seu telefone" id="telefone" name="telefone"
				maxlength="11" style="width: 10em" value="">
		</div>
		</fieldset>

		<fieldset class="grupo">
			<div class="campo">
				<label for="cidade">Cidade</label> <input type="text"
					placeholder="Digite sua cidade" id="cidade" name="cidade"
					style="width: 10em" value="">
			</div>
		</fieldset>
		<fieldset>
			<div class="campo">
				<label for="estado">Estado</label> <select id="estado"
					name="estado">
			<option value="AC">AC</option>
			<option value="AL">AL</option>
			<option value="AP">AP</option>
			<option value="AM">AM</option>
			<option value="BA">BA</option>
			<option value="CE">CE</option>
			<option value="DF">DF</option>
			<option value="ES">ES</option>
			<option value="GO">GO</option>
			<option value="MA">MA</option>
			<option value="MT">MG</option>
			<option value="MS">MS</option>
			<option value="MG">MG</option>
			<option value="PA">PA</option>
			<option value="PB">PB</option>
			<option value="PR">PR</option>
			<option value="PE">PE</option>
			<option value="PI">PI</option>
			<option value="RJ">RJ</option>
			<option value="RN">RN</option>
			<option value="RS">RS</option>
			<option value="RO">RO</option>
			<option value="RR">RR</option>
			<option value="SC">SC</option>
			<option value="SP">SP</option>
			<option value="SE">SE</option>
			<option value="TO">TO</option>
			<option value="EX">Estrangeiro</option>
			</select> </select>
			</div>
			</fieldset>

			<fieldset>
			<div class="campo">
				<label for="mensagem">Mensagem</label><sup>Opcional</sup>
				<textarea rows="6" placeholder="Digite aqui sua mensagem"
					style="width: 20em" id="mensagem" maxlength="100" name="mensagem"></textarea>
			</div>
			</fieldset>

			<fieldset>
			<div class="campo">
				<label> <input type="checkbox" name="novidades" value="1">
					Gostaria de receber novidades em meu e-mail.
				</label>
			</div>
			</fieldset>
			<br>	


			<div class="testbutton">
				<center>
					<input type=submit value="Cadastrar" onclick="ChecarCampos();">
				</center>
			</div>
		</fieldset>
	</form>

</body>
</html>
Felipe Moreno

Felipe Moreno

Responder

Posts

17/07/2019

Jothaz 

    function ChecarCampos() {
 
        
			var erro = "";
			bool temErro = false
 
            if (document.getElementById('nome').value == "")
            {
             
                erro += "\\\\nPreencha o campo nome";
				temErro = true
            }
 
 
            if (document.getElementById('snome').value == "")
            {
                erro += "\\\\nPreencha o campo sobrenome";
                temErro = true
            }
 
 
            if (temErro) 
            {
                alert("Os seguintes erros foram encontrador:\\\\n" + erro);
                return false
            }
        }
Responder
Gostei + 0

17/07/2019

Felipe Moreno 

    function ChecarCampos() {
 
        
			var erro = "";
			bool temErro = false
 
            if (document.getElementById('nome').value == "")
            {
             
                erro += "\\\\\\\\nPreencha o campo nome";
				temErro = true
            }
 
 
            if (document.getElementById('snome').value == "")
            {
                erro += "\\\\\\\\nPreencha o campo sobrenome";
                temErro = true
            }
 
 
            if (temErro) 
            {
                alert("Os seguintes erros foram encontrador:\\\\\\\\n" + erro);
                return false
            }
        }



Obrigado pela atenção amigo, mas continua não aparecendo nada quando apertao meu botão, vou tentar mais um pouco aqui, obrigado cara, tenha uma boa tarde!!
Responder
Gostei + 0

17/07/2019

Jothaz

Foi mal não vi o erro. Coloque sua tag script dentro da tag <HEAD> depois da tag <STYLE>.
Ou pode colocar no final, mas dentro da tag <BODY> antes de </BODY>.


<html>
<head>
<title>Formulário</title>
<meta charset="utf-8">

 
 
</head>
<body>
    <style type="text/css">
 
        .fieldset {
            border: 0;
        }
        
        .body, .input, .select, .textarea, .button {
            font-family: sans-serif;
            font-size: 1em;
        }
        
        .grupo:before, .grupo:after {
            content: " ";
            display: table;
        }
        
        .grupo:after {
            clear: both;
        }
        
        .campo {
            margin-bottom: 1em;
        }
        
        .campo label {
            margin-bottom: 0.2em;
            color: #666;
            display: block;
        }
        
        .grupo .campo {
            float: left;
            margin-right: 1em;
        }
        
        .campo input[type="text"], .campo .input[type="email"], .campo .input[type="url"],
            .campo input[type="tel"], .campo .select, .campo .textarea {
            padding: 0.2em;
            border: 1px solid #CCC;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
            display: block;
        }
        
        .campo .select .option {
            padding-right: 1em;
        }
        
        .campo .input:focus, .campo .select:focus, .campo .textarea:focus {
            background: #FFC;
        }
        
        .campo .label.checkbox {
            color: #000;
            display: inline-block;
            margin-right: 4em;
        }
        
 
    </style>
 
    <script language="javascript" type="text/javascript">
            
        function ChecarCampos() {


    var erro = "";
    var temErro = false;

    if (document.getElementById('nome').value == "")
    {

        erro += "\\\\\\\\nPreencha o campo nome";
        temErro = true
    }


    if (document.getElementById('snome').value == "")
    {
        erro += "\\\\\\\\nPreencha o campo sobrenome";
        temErro = true
    }


    if (temErro) 
    {
        alert("Os seguintes erros foram encontrador:\\\\\\\\n" + erro);
        return false
    }

    </script>

        </head>
        <body> 
 
 
    </script>
 
    <form action="" method="post">
         
            <fieldset class="grupo">
                <legend><h1>Formulário de Cadastro</h1></legend>
                <div class="campo">
                    <label for="nome">Nome</label> <input type="text"
                        placeholder="Digite seu nome" id="nome" name="nome"
                        style="width: 10em" value="">
                </div>
                <div class="campo">
                    <label for="snome">Sobrenome</label> <input type="text"
                        placeholder="Último nome" id="snome" name="snome"
                        style="width: 10em" value="">
                </div>
            </fieldset>
            <fieldset>
            <div class="campo">
                <label>Sexo</label>Masculino<label> <input type="radio" name="sexo"
                value="masculino"> 
            </label>Feminino<label> <input type="radio" name="sexo" value="feminino"></fieldset>
                 
             
        <fieldset>
        </div>
        <div class="campo">
            <label for="email">E-mail</label> <input type="text"
                placeholder="Digite seu e-mail" id="email" name="email"
                style="width: 20em" >
        </div>
        <div class="campo">
            <label for="emailconfirma">Confirme e-mail</label> <input type="text"
                placeholder="Digite novamente seu e-mail" id="emailconfirma" name="emailconfirmar"
                style="width: 20em">
        </div>
        </fieldset>
        <fieldset>
        <div class="campo">
            <label for="telefone">Telefone</label> <input type="text"
                placeholder="Digite seu telefone" id="telefone" name="telefone"
                maxlength="11" style="width: 10em" value="">
        </div>
        </fieldset>
 
        <fieldset class="grupo">
            <div class="campo">
                <label for="cidade">Cidade</label> <input type="text"
                    placeholder="Digite sua cidade" id="cidade" name="cidade"
                    style="width: 10em" value="">
            </div>
        </fieldset>
        <fieldset>
            <div class="campo">
                <label for="estado">Estado</label> <select id="estado"
                    name="estado">
            <option value="AC">AC</option>
            <option value="AL">AL</option>
            <option value="AP">AP</option>
            <option value="AM">AM</option>
            <option value="BA">BA</option>
            <option value="CE">CE</option>
            <option value="DF">DF</option>
            <option value="ES">ES</option>
            <option value="GO">GO</option>
            <option value="MA">MA</option>
            <option value="MT">MG</option>
            <option value="MS">MS</option>
            <option value="MG">MG</option>
            <option value="PA">PA</option>
            <option value="PB">PB</option>
            <option value="PR">PR</option>
            <option value="PE">PE</option>
            <option value="PI">PI</option>
            <option value="RJ">RJ</option>
            <option value="RN">RN</option>
            <option value="RS">RS</option>
            <option value="RO">RO</option>
            <option value="RR">RR</option>
            <option value="SC">SC</option>
            <option value="SP">SP</option>
            <option value="SE">SE</option>
            <option value="TO">TO</option>
            <option value="EX">Estrangeiro</option>
            </select> </select>
            </div>
            </fieldset>
 
            <fieldset>
            <div class="campo">
                <label for="mensagem">Mensagem</label><sup>Opcional</sup>
                <textarea rows="6" placeholder="Digite aqui sua mensagem"
                    style="width: 20em" id="mensagem" maxlength="100" name="mensagem"></textarea>
            </div>
            </fieldset>
 
            <fieldset>
            <div class="campo">
                <label> <input type="checkbox" name="novidades" value="1">
                    Gostaria de receber novidades em meu e-mail.
                </label>
            </div>
            </fieldset>
            <br>  
 
 
            <div class="testbutton">
                <center>
                    <input type=submit value="Cadastrar" onclick="ChecarCampos();">
                </center>
            </div>
        </fieldset>
    </form>
 
</body>
</html>

Responder
Gostei + 0

17/07/2019

Jothaz

Ficou um erro dua </script>.

Retire a última.
Responder
Gostei + 0

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar