0
私はフォームに1000hzのバリデーターを組み込もうとしましたが、検証していないようです。私はサンプルフォームと関連ファイルのソースを見てきましたが、私が含まれていないものは見えません。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]\d{1,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="\d{11}" 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._%+-][email protected][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="\d{11}" 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>
バンプ、任意のアイデア？ – Paul