javascript - jqBootstrapValidation not working, always return valid value; -
don't know why validation not working, have try use various validator result return valid..
need second eyes spot error..
first time using snippet, snippet below 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 nothing, display // error messages 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 need 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>
i saw 2 problems:-
in following line, note you're missing quote " after div class. not main problem though
<div class=btn-group" role="group" aria-label="true"> the second problem jqbootstrapvalidation requires define control-group class parent div. adding 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 nothing, display // error messages 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 need 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>
Comments
Post a Comment