この例では、必要な属性を持つ入力フィールドが 1 つしかなく、iOS Safari (iPhone/iPad) および IE9 で値が空の場合でもアラート OK が表示されます。Firefox と Chrome は正常に動作します。
私は何か見落としてますか?
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>jqBootstrapValidation by ReactiveRaven</title>
<link rel="stylesheet" href="http://reactiveraven.github.com/jqBootstrapValidation/css/bootstrap.css">
<script src="http://reactiveraven.github.com/jqBootstrapValidation/js/jQuery-1.7.2-min.js"></script>
<script src="http://reactiveraven.github.com/jqBootstrapValidation/js/bootstrap.js"></script>
<script src="http://reactiveraven.github.com/jqBootstrapValidation/js/jqBootstrapValidation.js"></script>
<script>
$(function() {
$("input,textarea,select").jqBootstrapValidation(
{
preventSubmit: true,
submitError: function($form, event, errors) {
// Here I do nothing, but you could do something like display
// the error messages to the user, log, etc.
},
submitSuccess: function($form, event) {
alert("OK");
event.preventDefault();
},
filter: function() {
return $(this).is(":visible");
}
}
);
});
</script>
</head>
<body>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#validators_required_preview">Example</a></li>
</ul>
<div class="tab-content">
<div id="validators_required_preview" class="tab-pane active">
<form class="form-horizontal">
<input name="some_field" required="" value="" type="text">
<button type="submit" class="btn btn-primary">Test Validation <i class="icon-ok icon-white"></i></button></form>
</div>
</div>
</div>
</body></html>