时间戳

首页 > 解决方案 > 通过 jquery 验证 Bootstrap 验证器

jquery - 通过 jquery 验证 Bootstrap 验证器

问题描述

我想在单击按钮时引导程序无效时验证引导程序，例如我有以下按钮代码

我已经应用了引导验证器的 CDN。

<form id="studentForm">
 <input type="text" name="name" required="">
  <button onclick="checkvalidation()" type="button">check</button>
</form>

$(document).ready(function() {
        $('#studentForm').bootstrapValidator();
    });

我想检查 checkvalidation() 表单而不是类型提交我该如何检查

标签： jquery

解决方案

您需要做的是处理默认操作

所以你我会怀疑你会从这样的事情开始

$("button").on('click', function(event) {
     event.preventDefault();
}

“event.preventDefault()”只是停止该元素的基本方法的默认传播，然后您可以在该空间中应用您的验证脚本和 ajax 方法。

如果您对正在使用的插件有一些详细信息，我可以在这里更新我的答案，我在下面添加了一个示例供您试用，如果您喜欢的话。

$("button").on('click', function(event) {
	event.preventDefault();
 
 	//check if input is null or blank
  if($("#name").val() == ""|| $("#name").val() == null){
    $("form").removeClass("needs-validation").addClass("was-validated");
  }
  else{
   alert("valid details")
  }
  
  //then you can do you ajax function here 
});
form {
  padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="icon" href="data:;base64,iVBORwOKGO=" />
    <title>Document</title>
</head>
<body>
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="name" placeholder="First name" value="" required>
      <div class="invalid-feedback">
        Please enter a name
      </div>
    </div>
 </div>
 <button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

推荐阅读