只有在通过验证后才能执行插入函数

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>