通过validate后才执行insert函数

Question

我有以下代码来验证表格是否已填写：

$("#validate").on("click",function(){
    if(!$(".alerta").valid());
  });
  $.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" })
  $(".alerta").validate({
      messages: {
        Tipo: "Tipo de alerta obrigatório",
        Prioridade: {
              required: "Prioridade obrigatório"
          }
      }
  });

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

<form method="POST" class="row g-3 alerta">
  <div class="col-md-4">
    <label for="Tipo" class="form-label">TIPO DE ALERTA <span style="color: red;">*</span></label>
    <select class="form-select chosen-select" name="Tipo" id="Tipo" required>
    <option></option>
    <option value="1">Teste</option>
    <option value="2">Teste1</option>
    </select>
  </div>
  
  <div class="col-md-4">
    <label for="Tipo" class="form-label">Prioridade <span style="color: red;">*</span></label>
    <select class="form-select" name="Prioridade" id="Prioridade" required>
    <option></option>
    <option value="1">Prioridade</option>
    <option value="2">Prioridade1</option>
    </select>
  </div>
  <div class="col-12">
    <button type="button" class="btn-wide btn btn-success" style="float: right; margin-right: 5%; margin-top: 1%;" id="validate"> Enviar <i class="metismenu-icon pe-7s-paper-plane"></i></button>
  </div>
</form>

验证后，我创建了插入数据库的代码，如下所示：我在表单按钮中添加了这段代码 onclick="inserir_registo();"

然后我创建了函数：

function inserir_registo(){
    var dadosajax = {
        'Tipo' : $("#Tipo").val(),
        'Prioridade' : $("#Prioridade").val()
    };
    $.ajax({
        url: 'registo.php',
        type: 'POST',
        cache: false,
        data: dadosajax,
        error: function(){

        },
        success: function(data)
        { 
            $('.alerta')[0].reset();
            Swal.fire('Boa!', 'Alerta enviado com sucesso!', 'success');
        }
    });
}

我遇到的问题是，当我点击插入数据库的按钮时，如果它没有通过验证，它会将其插入数据库，只是填写了字段。您应该只在表单正确通过验证时插入它。

Answer 1

您需要确保insertIntoDB()函数仅在验证成功时被调用：

 $("#validate").on("click", function() {
  if ($(".alerta").valid()) insertIntoDB($("form.alerta"));
 });

这是一个工作片段：

$("#validate").on("click", function() {
  if ($(".alerta").valid()) insertIntoDB($("form.alerta"));
});
$.validator.setDefaults({
  ignore: ":hidden:not(.chosen-select)"
})
$(".alerta").validate({
  messages: {
    Tipo: "Tipo de alerta obrigatório",
    Prioridade: "Prioridade obrigatório"
  }
});

function insertIntoDB($o){
 console.log($o.serializeArray())
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

<form method="POST" class="row g-3 alerta">
  <div class="col-md-4">
    <label for="Tipo" class="form-label">TIPO DE ALERTA <span style="color: red;">*</span></label>
    <select class="form-select chosen-select" name="Tipo" id="Tipo" required>
      <option></option>
      <option value="1">Teste</option>
      <option value="2">Teste1</option>
    </select>
  </div>

  <div class="col-md-4">
    <label for="Tipo" class="form-label">Prioridade <span style="color: red;">*</span></label>
    <select class="form-select" name="Prioridade" id="Prioridade" required>
      <option></option>
      <option value="1">Prioridade</option>
      <option value="2">Prioridade1</option>
    </select>
  </div>
  <div class="col-12">
    <button type="button" class="btn-wide btn btn-success" style="float: right; margin-right: 5%; margin-top: 1%;" id="validate"> Enviar <i class="metismenu-icon pe-7s-paper-plane"></i></button>
  </div>
</form>

通过validate后才执行insert函数

Only execute the insert function after passing the validate

javascript

jquery-validate