Search code examples
javascripthtmlverification

Check the value of an element and take action


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();


Solution

  • 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>