Javascript field validation in JSP

Question

Javascript field validation in JSP

Navigation

#1 by (2 votes)

0

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 is not working.

javascript java java-ee jsp

asked by anonymous 08.09.2017 / 20:27

1 answer

What is the best way to save multiple image links in a database? I need help with replaceAll for monetary values!

score 2 · Accepted Answer

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

But remember that you can explore many points of improvement in your code: Remove% unnecessary%, use <br /> for paragraphs or <p> 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 a glance than it is, it is also worth leaving some indication on the page of what is required.

In the part where <div> did not understand much good what you wanted to do then I 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>