Validation of fields with Javascript in JSP

Question

function validar() {
  var nome = document.getElementById("nome_passageiro").value;
  var data = document.getElementById("dt_nascimento").value;
  var cpf = document.getElementById("cpf").value;
  var modelo = document.getElementById("modelo").value;
  var status = document.getElementById("status").find("option[value='"+val+"']");


if (nome == "") {
  alert('Preencha o campo com seu nome');
}else if(data==""){
  alert('Preencha a data');
}else if(cpf==""){
  alert('Preencha o cpf');
}else if(modelo==""){
  alert('Preencha o modelo');
}else if(status==""){
  alert('Preencha o Status');
}else{
  return false;
}

}

<h1>Cadastro de Motoristas</h1>
Nome do Motorista:
<input type="text" id="nome_passageiro" /><br/><br/>

Data de Nascimento:
<input type="text" id="dt_nascimento" /><br/><br/>

CPF:
<input type="text" id="cpf" onkeypress="" /><br/><br/>

Modelo de Carro:
<input type="text" id="modelo" /><br/><br/>

Status:
<input list="status" /><br/><br/>

<datalist id="status">
  <option value="-------">
  <option value="Ativo">
  <option value="Inativo">
</datalist>

<button type="button" onkeypress="validar()">Cadastrar</button>

I’m doing a field validation using Javascript in a jsp application but it’s not working.

Answer 1

Basically you need to change onkeypress="validar()" for onclick="validar()" as the function should start as soon as the user clicks the button.

But remember that you can explore many improvement points in your code: Remove the <br /> unnecessary, use <p> for paragraphs or <div> if you only want to group the fields.

Thinking about improving the user experience when accessing your page leave the validation with IF instead of Elseif. It is much better for the user to see everything he has missed at once than slowly, it is also valid to leave some indication on the page of what is required.

In so far as <datalist> I didn’t quite understand what you wanted to do so I left commented to avoid the error in Javascript.

function validar() {
  var msgErro = "";
  var nome = document.getElementById("nome_passageiro").value;
  var data = document.getElementById("dt_nascimento").value;
  var cpf = document.getElementById("cpf").value;
  var modelo = document.getElementById("modelo").value;
  var status =  document.getElementById("status").value;

if (nome == "") {
  msgErro = msgErro + 'Preencha o campo com seu nome. \n';
}

if(data==""){
  msgErro = msgErro + 'Preencha a data. \n';
}

if(cpf==""){
  msgErro = msgErro + 'Preencha o cpf. \n';
}

if(modelo==""){
  msgErro = msgErro + 'Preencha o modelo. \n';
}

if(status==""){
  msgErro = msgErro + 'Preencha o Status. \n';
}

if(msgErro != ""){
  alert(msgErro);
  return false;
}


}

<h1>Cadastro de Motoristas</h1>
<div>
  <label for="nome_passageiro">Nome do Motorista:</label>
  <input type="text" name="nome_passageiro" id="nome_passageiro" />
</div>

<div>
  <label for="dt_nascimento">Data de Nascimento:</label>
  <input type="text" name="dt_nascimento" id="dt_nascimento" />
</div>

<div>
  <label for="cpf">CPF:</label>
  <input type="text" name="cpf" id="cpf" onkeypress="" />
</div>

<div>
  <label for="modelo">Modelo de Carro:</label>
  <input type="text" name="modelo" id="modelo" />
</div>

<div>
  <label for="status">Status:</label>
  <select name="status" id="status">
    <option value="">Selecione</option>
    <option value="Ativo">Ativo</option>
    <option value="Inativo">Inativo</option>
  </select>
</div>

<div>
  
</div>

<div>
  <button type="button" onclick="validar()">Cadastrar</button>
</div>