问使用jquery验证Bootstrap验证器
EN

Stack Overflow用户

提问于 2019-08-07 23:44:52

回答 1查看 264关注 0票数 0

我想在单击按钮时验证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

回答 1

Stack Overflow用户

发布于 2019-08-08 00:27:22

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

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

$("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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57398078

复制

相似问题

问使用jquery验证Bootstrap验证器
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jquery验证Bootstrap验证器EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jquery验证Bootstrap验证器
EN