jqBootstrapValidation not working, always return valid value;

Question

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>

the problem is the input inside Tab component... – DoogyHtw Apr 20 '16 at 06:57 — DoogyHtw, Apr 20 '16 at 06:57

score 5 · Accepted Answer · answered Apr 22 '16 at 00:36

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>

mark with required the input, empty value pass validation – Borja Tur Apr 22 '16 at 01:03 — Borja Tur, Apr 22 '16 at 01:03

jqBootstrapValidation not working, always return valid value;

1 Answers1