Validation using JS

Question

Validation using JS

Asked 5 years, 6 months ago

Viewed 50 times

0

good afternoon friends !

I am trying to make my form validate a field for testing, but it is not responding to validation of nulls by JS.

Follow the code on the snippet:

function Validacao() {
  if (document.form.razao_social.value == "") {
    alert("Por favor empreencha o campo");
    document.form.razao_social.focus();
    return false;

  }
}

<html>

<head>
  <title>Cadastro Prestador</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap -->
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <!-- menu -->
  <nav class="navbar navbar-inverse">
    <div class="container-inverse">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Cadastro de Prestador</a>
      </div>

    </div>
  </nav>

  <style>
    #cont1 {
      border: solid;
      margin-top: 2%;
      padding: 1%;
      padding-bottom: 2%;
    }
    
    #btn_cad {
      float: right;
    }
  </style>
  <script>
    function Validacao() {
      if (document.form.razao_social.value == "") {
        alert("Por favor empreencha o campo");
        document.form.razao_social.focus();
        return false;

      }
    }
  </script>

  <div class="container">
    <div class="panel panel-primary">
      <div class="panel-heading">Prestador</div>
      <div class="panel-body">
        <form name "Ficha1" action="cadastroprestador.php" onsubmit="return Validacao()" method="post">
          <div class="form-group" id="Prestador">
            <div class="col-lg-2">
              <label for="ex1">ID </label>
              <input class="form-control" name="id" type="text">
            </div>
            <div class="col-lg-12 form-group">
              <label for="ex2">Razão Social</label>
              <input class="form-control" name="razao_social" type="text">
            </div>
            <div class="col-lg-6 form-group">
              <label for="ex3">Nome Fantasia</label>
              <input class="form-control" name="nome_fantasia" type="text">
            </div>
            <div class="col-lg-6 form-group">
              <label for="ex4">CNPJ</label>
              <input class="form-control" name="CNPJ" type="text">
            </div>
            <div class="col-lg-6 form-group">
              <label for="ex6">Tipo</label>
              <select class="form-control" name="tipo">
                <option>HOSPITAL</option>
                <option>CLINICA</option>
                <option>LABORATORIO</option>
                <option>REMOÇÃO</option>
              </select>
            </div>
            <div class="col-lg-6 form-group">
              <label for="ex5">Indicação</label>
              <select class="form-control" name="indicacao">
                <option>Prospecção</option>
                <option></option>
                <option></option>
                <option></option>
              </select>
            </div>
          </div>
      </div>
    </div>
    <div class="panel panel-primary">
      <div class="panel-heading">Logadouro</div>
      <div class="panel-body">

        <div class="col-lg-12 form-group">
          <label for="ex2">Endereço</label>
          <input class="form-control" name="endereco" type="text">
        </div>
        <div class="col-lg-6 form-group">
          <label for="ex3">Numero</label>
          <input class="form-control" name="Numero" type="text">
        </div>
        <div class="col-lg-6 form-group">
          <label for="ex4">Bairro</label>
          <input class="form-control" name="bairro" type="text">
        </div>
        <div class="col-lg-6 form-group">
          <label for="ex6">Cidade</label>
          <input class="form-control" name="cidade" type="text">
        </div>
        <div class="col-lg-6 form-group">
          <label for="ex6">UF</label>
          <input class="form-control" name="UF" type="text">
        </div>
        <button type="submit" class="btn btn-primary col-lg-2 right" id="btn_cad">Cadastrar</button>
        </form>
      </div>
    </div>
</body>

</html>

1 answer

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2018-12-18T15:58:07+00:00

document.form finds nothing because there is no element with the name form. Unless the name form were "form": <form name="form"...

Put a this in onsubmit="return Validacao(this)" and an argument in function:

                   ↓
function Validacao(f){...

And replace document.form for f:

function Validacao(f){
   if (f.razao_social.value==""){
      alert("Por favor empreencha o campo");
      f.razao_social.focus();
      return false; 
   }
}

There is also a missing sign of = after "name" in: <form name "Ficha1"...

Or you can pick it up by the name of the form, which is Ficha1, without sending the this for the function:

function Validacao(){
   if (document.Ficha1.razao_social.value==""){
      alert("Por favor empreencha o campo");
      document.Ficha1.razao_social.focus();
      return false; 
   }
}

The advantage of sending the this is that the code gets cleaner and more practical to work with.

The this represents the very element that is calling the function, and the f is a function argument that receives the value of this. The f is just any name you choose; it could be:

function Validacao(a){...

or

function Validacao(formulario){...

or

function Validacao(i){...

or

function Validacao(x){...

etc..

To improve validation, use the method .Trim() to prevent only spaces typed through if:

if (f.razao_social.value.trim() == ""){...