Validation using JS

Navigation
0

Good afternoon friends!

I'm trying to make my form validate a field for testing, but it is not responding to null validation by JS.

Follow the code in 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><!--LatestcompiledJavaScript--><scriptsrc="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>
    
asked by anonymous 18.12.2018 / 16:41

1 answer

1

document.form does not find anything because there is no element with name form . Unless the name of the form was "form": <form name="form"...

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

                   ↓
function Validacao(f){...

And replace document.form with 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 sign of = after "name" in: <form name "Ficha1"...

Or else you can get the name of the form, which is Ficha1 , without sending this to 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 this is that the code gets cleaner and more practical to work with.

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

function Validacao(a){...

or 

function Validacao(formulario){...

or 

function Validacao(i){...

or 

function Validacao(x){...

etc.

To improve validation, use the .trim () method to prevent only typed spaces from passing if : 

if (f.razao_social.value.trim() == ""){...
    
18.12.2018 / 16:58
DropDown does not work with responsiveness (Bootstrap) How to query multiple columns