Quiero validar el formulario sin enviar. No tengo la intención de actualizar la página. Estoy intentando de esta manera pero no está validando.
<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> Puedo validar el formulario con js, pero de esa manera tengo que poner el button con type="submit" , pero no quiero que refresque la pagina
Puede usar eventos como onchange o onkeyup para detectar cambios y ejecutar su validación
Escribí un ejemplo para la entrada de texto, cada vez que el usuario presiona un botón, ejecuta la función de validación
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>