I'm doing a field validation in my project, however I've set it so that the empty field error only appears in the "name" field as I'm still working on it. However, the error message is appearing in all fields, both for successful validation and for the error message.
JavaScript:
function myFunction1() {
var valor = document.getElementById("nome").value;
if (valor == null || valor.length == 0 || /^\s+$/.test(valor)) {
$("#nome").parent().parent().attr("class", "form-group2 has-error");
$("#nome").parent().children("span").text("O campo deve ser preenchido").show();
return false;
}
else {
$("#nome").parent().parent().attr("class", "form-group2 has-success");
$("#nome").parent().children("span").text("").hide();
alert("Informações gravadas com sucesso");
}
}
HTML:
<div class="container">
<h2>Cadastro de Indivíduo</h2>
<form role="form">
<div class="form-group">
<label for="id">ID:</label>
<input type="number" class="form-control" disabled="" id="usr">
</div>
<form action="" role="form">
<div class="form-group2">
<label for="nome">Nome:</label>
<input type="text" class="form-control" id="nome">
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="rg">RG:</label>
<input type="number" class="form-control" id=rg>
</div>
<div class="form-group">
<label for="npai">Nome do pai:</label>
<input type="text" class="form-control" id="npai">
</div>
<div class="form-group">
<label for="nmae">Nome da mãe:</label>
<input type="text" class="form-control" id="nmae">
</div>
<div class="form-group">
<label for="nascimento">Data de nascimento:</label>
<input type="date" class="form-control" id="nascimento">
</div>
</form>
<button type="button" id="gravar" class=" btn btn-success" onclick="myFunction1()">Gravar</button>
<button type="button" class="btn btn-primary">Limpar</button>
<button type="button" class="btn btn-danger" onclick="myFunction2()">Excluir</button>
</div>