I want to validate the form without submitting. I do not intend to refresh the page. I'm trying this way but it's not validating.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" class="row g-3">
<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 selected>Selecione opções</option>
<option value="1">Teste</option>
<option value="2">Teste1</option>
</select>
</div>
<div class="col-md-6">
<label for="Assunto" class="form-label">Assunto <span style="color: red;">*</span></label>
<input type="text" class="form-control" id="Assunto" name="Assunto" required>
</div>
<div class="col-12">
<button type="button" class="btn-wide btn btn-success" style="float: right; margin-right: 5%; margin-top: 1%;" onclick="insert_form();"> Enviar <i class="metismenu-icon pe-7s-paper-plane"></i></button>
</div>
</form>I can validate the form with js, but that way I have to put the button with type="submit", but I don't want it to refresh the page
You can use events like onchange or onkeyup to detect changes and run your validation
I wrote an example for the text input, whenever the user presses a button it runs the validate function
function validate(value) {
console.log("addvalidation code here", value);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" class="row g-3">
<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 selected>Selecione opções</option>
<option value="1">Teste</option>
<option value="2">Teste1</option>
</select>
</div>
<div class="col-md-6">
<label for="Assunto" class="form-label">Assunto <span style="color: red;">*</span></label>
<input type="text" class="form-control" id="Assunto" name="Assunto" onkeyup="validate(this.value)" required>
</div>
<div class="col-12">
<button type="button" class="btn-wide btn btn-success" style="float: right; margin-right: 5%; margin-top: 1%;" onclick="insert_form();"> Enviar <i class="metismenu-icon pe-7s-paper-plane"></i></button>
</div>
</form>