1000hz 引导验证器根本不工作
Posted
技术标签:
【中文标题】1000hz 引导验证器根本不工作【英文标题】：1000hz Bootstrap Validator not working at all 【发布时间】：2017-07-15 09:04:29 【问题描述】：我尝试在我的表单中加入 1000hz 的验证器，但它似乎没有验证。我查看了示例表单和相关文件的源代码，但没有看到我没有包含的任何内容。
我花了几天时间试图解决这个问题。我已经通过这个论坛阅读了类似的帖子，但似乎没有一个答案表明我遗漏了任何东西。
我已经尝试过 data-toggle="validator" 和 jQuery 初始化。当我要求它通过 jQuery 验证提交时，控制台记录为进入该阶段，但我没有收到任何红色输入字段边框或错误消息。
有人可以帮忙吗？
我在https://1000hz.github.io/bootstrap-validator/ 的示例中注意到，它会在您更改输入字段之间的焦点时进行验证，这是理想的，而不是等到提交。这是标准还是需要自定义选项？我在该网站的源代码中没有看到自定义选项。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="NOINDEX, NOFOLLOW">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="assets/css/Navigation-with-Button1.css">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/custom.css">
<link rel="stylesheet" href="assets/css/Login-Form-Dark.css">
<link rel="stylesheet" href="assets/css/styles-1.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="config1412/deliveries.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.js"></script>
</head>
<body>
<div class="navbar-fixed-top navbar">
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 text-center">
<a class="btn btn-default action-button" role="button" href="customise.php"><i class="icon ion-ios-arrow-left"></i> BACK</a>
</div>
<div class="col-xs-6 text-center">
<span id="basketcount">2</span> <i class="icon ion-ios-cart"></i> <span id="baskettotal">£10.80</span> <br/>
<i class="icon ion-ios-circle-filled"></i>
<i class="icon ion-ios-circle-filled"></i>
<i class="icon ion-ios-circle-filled"></i>
<i class="icon ion-ios-circle-outline"></i>
</div>
<div class="col-xs-3 text-center">
<form id="sageform" role="form" data-toggle="validator" method="post" >
<button class="btn btn-default action-button" name="pay" onclick="" type="submit" href="#">NEXT <i class="icon ion-ios-arrow-right"></i></button>
</div>
</div>
</div>
</div>
<div class="container" style="margin-top:75px;">
<input name="collectiondelivery" type="hidden" id="collectiondelivery" value=""/>
<input name="customerpostcode" type="hidden" id="customerpostcode" value=""/>
<input name="customerdistance" type="hidden" id="customerdistance" value=""/>
<div>
<ul class="nav nav-tabs">
<li class="active"><a href="#tab-1" role="tab" data-toggle="tab">Delivery Address</a></li>
<li class=""><a href="#tab-2" role="tab" data-toggle="tab">Billing Address</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="tab-1">
<h1>Delivery Address</h1>
<p id="deliverystatus" style="color: red;"></p><p>We've automatically filled in your credit card billing address, but if it's different, please amend your details using the Billing Address tab.</p><div class="form-group"><label class="control-label">What time would you like your order delivered?</label><select name="requested_time" class="form-control"><option value="17:10:00">17:10:00</option><option value="17:20:00">17:20:00</option><option value="17:30:00">17:30:00</option><option value="17:40:00">17:40:00</option><option value="17:50:00">17:50:00</option><option value="18:00:00">18:00:00</option><option value="18:10:00">18:10:00</option><option value="18:20:00">18:20:00</option><option value="18:30:00">18:30:00</option><option value="18:40:00">18:40:00</option><option value="18:50:00">18:50:00</option><option value="19:00:00">19:00:00</option><option value="19:10:00">19:10:00</option><option value="19:20:00">19:20:00</option><option value="19:30:00">19:30:00</option><option value="19:40:00">19:40:00</option><option value="19:50:00">19:50:00</option><option value="20:00:00">20:00:00</option><option value="20:10:00">20:10:00</option><option value="20:20:00">20:20:00</option><option value="20:30:00">20:30:00</option><option value="20:40:00">20:40:00</option><option value="20:50:00">20:50:00</option></select> </div>
<div class="form-group has-feedback">
<label class="control-label">First Name</label>
<input class="form-control" type="text" name="firstnames" id="deliveryfirstnames" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group has-feedback">
<label class="control-label">Surname</label>
<input class="form-control" type="text" name="surname" id="deliverysurname" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group has-feedback">
<label class="control-label">Address Line 1</label>
<input class="form-control" type="text" name="address1" id="deliveryaddress1" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label class="control-label">Address Line 2</label>
<input class="form-control" type="text" name="address2" id="deliveryaddress2">
</div>
<div class="form-group">
<label class="control-label">City </label>
<input value="Belfast" class="form-control" type="text" name="city" id="deliverycity" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label class="control-label">Postcode </label>
<input value="" class="form-control" type="text" name="postcode" id="deliverypostcode" title="Please enter a valid Northern Ireland postcode" pattern="[BT|bt][BT|bt]\d1,2\s?\d[A-Z|a-z][A-Z|a-z]" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label class="control-label">Phone </label>
<input class="form-control form-control" type="tel" name="phonenumber" id="deliveryphonenumber" title="Enter your full phone number if you are entering a landline number" maxlength="11" pattern="\d11" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label class="control-label">Email </label>
<input class="form-control form-control" type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]2,63$" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label class="control-label">Comments </label>
<input type="textarea" name="customercomments" placeholder="Any comments, e.g. delivery information"/><br/>
</div>
</div>
<div class="tab-pane " role="tabpanel" id="tab-2">
<h1>Credit Card Billing Address</h1>
<div class="form-group">
<label class="control-label">First Name</label>
<input class="form-control" type="text" name="billingfirstnames" id="firstnames" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label class="control-label">Surname</label>
<input class="form-control" type="text" name="billingsurname" id="surname" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label class="control-label">Address Line 1</label>
<input class="form-control" type="text" name="billingaddress1" id="billingaddress1" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label class="control-label">Address Line 2</label>
<input class="form-control" type="text" name="billingaddress2" id="billingaddress2">
</div>
<div class="form-group">
<label class="control-label">City </label>
<input class="form-control" type="text" name="billingcity" id="billingcity" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label class="control-label">Country</label>
<select name="billingcountry" class="form-control">
<option value="GB" selected>United Kingdom</option>
<option value="IE">Republic of Ireland</option>
</select>
</div>
<div class="form-group">
<label class="control-label">Postcode </label>
<input class="form-control" type="text" name="billingpostcode" id="billingpostcode" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label class="control-label">Phone </label>
<input class="form-control form-control" type="tel" name="billingphonenumber" id="billingphonenumber" title="Enter your full phone number including 02890 if you are entering a landline number" maxlength="11" pattern="\d11" required>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
</form>
</div>
<script type="text/javascript">
// $(document).ready(function()
// $("#sageform").submit(function(e)
// e.preventDefault();
// );
// );
$("#deliveryfirstnames").keyup(function ()
var value = $(this).val();
$("#firstnames").val(value);
).keyup();
$("#deliverysurname").keyup(function ()
var value = $(this).val();
$("#surname").val(value);
).keyup();
$("#deliveryaddress1").keyup(function ()
var value = $(this).val();
$("#billingaddress1").val(value);
).keyup();
$("#deliveryaddress2").keyup(function ()
var value = $(this).val();
$("#billingaddress2").val(value);
).keyup();
$("#deliverycity").keyup(function ()
var value = $(this).val();
$("#billingcity").val(value);
).keyup();
$("#deliverypostcode").keyup(function ()
var value = $(this).val();
$("#billingpostcode").val(value);
).keyup();
$("#deliveryphonenumber").keyup(function ()
var value = $(this).val();
value=value.replace(/\s/g,'');
$(this).val(value);
$("#billingphonenumber").val(value);
).keyup();
</script>
<script type="text/javascript">
// $(document).ready(function ()
// $('#sageform').validator()
// $('#sageform').submit(function (e)
// $('#sageform').validator('validate');
// console.log("validating");
// );
// );
// $('#sageform').validator().on('submit', function (e)
// if (e.isDefaultPrevented())
// // handle the invalid form...
// else
// // if delivery
// // checkForDelivery(\'pay\')
// // else
// // document.forms[\'sageform\'].submit()
// // everything looks good!
//
// );
// var navHeight = $('.navbar').outerHeight(true) + 10;
// $.fn.validator.Constructor.FOCUS_OFFSET = navHeight;
// console.log(navHeight);
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：想通了。似乎是因为我将我的开场 form 标记放在导航栏中，所以我的按钮将在表单内。我尝试将开头的form 标签移动到第一个<div class="form-group"> 的正上方，现在它正在工作！
【讨论】：
以上是关于1000hz 引导验证器根本不工作的主要内容，如果未能解决你的问题，请参考以下文章