Menu
Don't know why my validation is not working, have try to use various validator but the result always return as valid..
Need second eyes to spot the error..
First time using snippet, hopefully my snippet below is correct..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Files</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqBootstrapValidation/1.3.7/jqBootstrapValidation.min.js"></script>
<script>
$(function() {
$("input,select,textarea").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.
alert("Not Valid!!");
},
submitSuccess: function($form, event) {
alert("OK");
},
filter: function() {
return $(this).is(":visible");
}
}
);
});
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#mainnav" aria-expanded="false">
<span class="sr-only">Navigation Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">K</a>
</div>
</nav>
<div class="container-fluid">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Form Name</h3>
</div>
<div class="panel-body">
<div class="panel panel-default">
<div class=btn-group" role="group" aria-label="true">
<div class="btn-toolbar" role="toolbar" aria-label="true">
<button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-repeat" aria-hidden="false"></span></button>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<ul class="nav nav-tabs">
<li><a href="#first-tab" data-toggle="tab">Main<i class="fa"></i></a></li>
</ul>
<form class="form-inline" id="accountForm" method="post" class="form-horizontal">
<div class="tab-content">
<div class="tab-pane" id="first-tab">
<!-- INPUT that need to be validated... -->
<div class="input-group input-group-sm col-xs-12">
<span class="input-group-addon" id="sizing-addon3">Serial Number (Only Accept Numbers)</span>
<input
type="text"
data-validation-regex-regex="^[0-9]*$"
data-validation-regex-message="Only Numbers"
class="form-control"
placeholder="Serial Number"
aria-describedby="sizing-addon3"
/>
</div>
<button type="submit" class="btn btn-primary">Test Validation <i class="icon-ok icon-white"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
335
I saw 2 problems:-
In the following line, note that you're missing a quote " after div class. This is not the main problem though
<div class=btn-group" role="group" aria-label="true">
The second problem is jqBootstrapValidation requires you to define control-group class to the parent div. So adding the following should work:-
<div class="control-group tab-pane" id="first-tab">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Files</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqBootstrapValidation/1.3.7/jqBootstrapValidation.min.js"></script>
<script>
$(function() {
$("input,select,textarea").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.
alert("Not Valid!!");
},
submitSuccess: function($form, event) {
alert("OK");
},
filter: function() {
return $(this).is(":visible");
}
}
);
});
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#mainnav" aria-expanded="false">
<span class="sr-only">Navigation Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">K</a>
</div>
</nav>
<div class="container-fluid">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Form Name</h3>
</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="btn-group" role="group" aria-label="true">
<div class="btn-toolbar" role="toolbar" aria-label="true">
<button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-repeat" aria-hidden="false"></span></button>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<ul class="nav nav-tabs">
<li><a href="#first-tab" data-toggle="tab">Main<i class="fa"></i></a></li>
</ul>
<form class="form-inline" id="accountForm" method="post" class="form-horizontal">
<div class="tab-content">
<div class="control-group tab-pane" id="first-tab">
<!-- INPUT that need to be validated... -->
<div class="input-group input-group-sm col-xs-12">
<span class="input-group-addon" id="sizing-addon3">Serial Number (Only Accept Numbers)</span>
<input
type="text"
data-validation-regex-regex="^[0-9]*$"
data-validation-regex-message="Only Numbers"
class="form-control"
placeholder="Serial Number"
aria-describedby="sizing-addon3"
/>
</div>
<button type="submit" class="btn btn-primary">Test Validation <i class="icon-ok icon-white"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
