检查元素的值并采取行动

如何解决检查元素的值并采取行动

我想要一个函数来检查表单的某些字段是否已填写，如果为真，它将执行我的代码，如果为假，则什么都不做。

简而言之，我想知道我如何检查字段，将要执行的代码，我已经准备好了。

我想检查是否已填写的字段的 HTML：

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

我的尝试：

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>