Estou tentando validar um formulário com javascript usando o evento onsubmit
mas, só que quando eu faço a validação ele não da o alerta e envia os dados da mesma forma e pelo que eu estou vendo não tem nada de erro nele no console, então eu percebi que ele ta pulando meu if
, o que não era para acontecer e ele ta aparentemente certo, então queria a ajuda de alguém segue o código html e em seguida o js:
HTML
<?php
include "index.php";
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="validar.js" type="text/javascript" charset="utf-8"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form action="inserir-dados.php" method="post" name="form" onSubmit="validar();">
<table border="0" class="table table-responsive">
<tr></tr>
<td>Nome <input type="text" name="nome" id="Cnome" maxlength="32" placeholder="Nome da pessoa" size="58" required></td>
</tr>
<tr>
<td>Idade <input type="number" name="idade" id="Cidade" placeholder="Idade da pessoa" required></td>
</tr>
<tr>
<td>Telefone <input type="number" name="telefone" id="Ctelefone" placeholder="XXX-XXXX-XXXX" required>
</td>
</tr>
<tr>
<td>Endereço <input type="text" name="endereço" id="Cendereço" maxlength="34" placeholder="Endereço da pessoa"
required> </td>
</tr>
<tr>
<td>Cidade <input type="text" name="cidade" id="Ccidade" maxlength="24" placeholder="Cidade da pessoa" required> </td>
</tr>
<tr>
<td>Estado</td>
</tr>
<tr>
<td>
<select class="btn btn-default" name="estado" id="Cestado">
<option>SP</option>
<option>MG</option>
<option>RJ</option>
<option>SC</option>
<option>BA</option>
<option>CE</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" value="Enviar"class="btn btn-primary"><input type="reset" Value="Limpar" class="btn btn-danger"></td>
</tr>
</table>
</form>
<!-- jQuery -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
</body>
</html>
JS
function validar(){
if(document.form.telefone.value.lenght <11){
alert("Esse campo precisa de 11 caracteres");
document.form.telefone.focus();
return false;
}
}