验证表单而不提交

Question

我想在不提交的情况下验证表单。 我不打算刷新页面。 我正在尝试这种方式，但它没有验证。

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

我可以用 js 验证表单，但那样我必须将button与type="submit"放在一起，但我不希望它刷新页面

Answer 1

您可以使用onchange或onkeyup等事件来检测更改并运行验证

我为文本输入编写了一个示例，每当用户按下按钮时，它就会运行验证 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>