I would like a function that checks if some fields of the form have been filled out and if true it would execute a code of mine, if false it would do nothing.
In short, I would like to know how I check the fields, the code that will be executed, I already have it ready.
HTML of the fields I want to check if they have been filled out:
<!-- verifica select -->
<div class="form-group pmd-textfield col-md-4">
<label for="InqueritoCircunscricaoPolicial" class="control-label cssPerguntas espacamentoLabels">
<strong>1.1</strong> Circunscrição policial
</label>
<select asp-for="InqueritoModel.COD_INQUERITO_CIRCUNSCRICAO_POLICIAL "
asp-items="Model.ListCircunscricao"
id="InqueritoCircunscricaoPolicial"
class="select-codigo"
onchange="mostrarOutroDeCombo(this, 'DSC_OUTRO_INQUERITO_CIRCUNSCRICAO_POLICIAL')">
<option value="">Selecione a circunscrição</option>
</select>
</div>
<!-- verifica input -->
<div class="form-group pmd-textfield col-sm-3">
<label for="NumeroDaOcorrencia" class="control-label cssPerguntas espacamentoLabels">
<strong>1.3</strong> Número da ocorrência
</label>
<input class="form-control" id="NumeroDaOcorrencia" maxlength="1000" placeholder="N° da ocorrência"
asp-for="InqueritoModel.NumeroDaOcorrencia"
type="text">
</div>
<!-- verifica input -->
<div class="form-group pmd-textfield col-sm-3">
<label for="DataDaInstauracao" class="control-label cssPerguntas espacamentoLabels">
<strong>1.9</strong> Data da instauração
</label>
<input class="form-control" id="DataDaInstauracao" min="1900-01-01"
asp-for="InqueritoModel.DataDaInstauracao"
type="date">
</div>
My attempt:
function progressBarInq() {
let progressBar0 = document.getElementById("InqProgress0");
let progressBar25 = document.getElementById("InqProgress25");
let progressBar50 = document.getElementById("InqProgress50");
let progressBar75 = document.getElementById("InqProgress75");
let progressBar100 = document.getElementById("InqProgress100");
//25%
let verInq1 = document.getElementById("InqueritoCircunscricaoPolicial");
//50%
let verInq5 = document.getElementById("NumeroDoIP");
//75%
let verInq8 = document.getElementById("DataDoRelatorio");
//100%
let verInq11 = document.getElementById("NumeroDoProcesso");
if (verInq1.value && verInq5.value && verInq8.value && verInq11.value) {
progressBar0.style.display = "none";
progressBar25.style.display = "block";
progressBar50.style.display = "none";
progressBar75.style.display = "none";
progressBar100.style.display = "none";
}
progressBarInq();
verifyonClick = () => {
var first = document.getElementById("InqueritoCircunscricaoPolicial")
var second = document.getElementById("NumeroDaOcorrencia")
var third = document.getElementById("DataDaInstauracao")
if(first.value && second.value && third.value)
alert("Value exist in every input")
else
alert("Please enter value in all fields")
}
<!-- verifica select -->
<div class="form-group pmd-textfield col-md-4">
<label for="InqueritoCircunscricaoPolicial" class="control-label cssPerguntas espacamentoLabels">
<strong>1.1</strong> Circunscrição policial
</label>
<select asp-for="InqueritoModel.COD_INQUERITO_CIRCUNSCRICAO_POLICIAL "
asp-items="Model.ListCircunscricao"
id="InqueritoCircunscricaoPolicial"
class="select-codigo"
onchange="mostrarOutroDeCombo(this, 'DSC_OUTRO_INQUERITO_CIRCUNSCRICAO_POLICIAL')">
<option value="">Selecione a circunscrição</option>
</select>
</div>
<!-- verifica input -->
<div class="form-group pmd-textfield col-sm-3">
<label for="NumeroDaOcorrencia" class="control-label cssPerguntas espacamentoLabels">
<strong>1.3</strong> Número da ocorrência
</label>
<input class="form-control" id="NumeroDaOcorrencia" maxlength="1000" placeholder="N° da ocorrência"
asp-for="InqueritoModel.NumeroDaOcorrencia"
type="text">
</div>
<!-- verifica input -->
<div class="form-group pmd-textfield col-sm-3">
<label for="DataDaInstauracao" class="control-label cssPerguntas espacamentoLabels">
<strong>1.9</strong> Data da instauração
</label>
<input class="form-control" id="DataDaInstauracao" min="1900-01-01"
asp-for="InqueritoModel.DataDaInstauracao"
type="date">
</div>
<div>
<button onclick="verifyonClick()"> submit </button>
</div>