javascript - jQuery Bootstrap validation not working -
i have used bootstrapvalidator.js validate page, cannot validate page. validator download link is: https://github.com/nghuuphuoc/bootstrapvalidator. possible error? im using netbeans ide.
<%@page contenttype="text/html" pageencoding="utf-8"%> <html> <head> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="validator/dist/css/bootstrapvalidator.min.css"/> <script type="text/javascript" src="validator/src/js/bootstrapvalidator.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script> $(document).ready(function() { $('#registerform').bootstrapvalidator({ fields: { firstname: { validators: { notempty: { message: 'the first name required , cannot empty' } } `enter code here` }, lastname: { validators: { notempty: { message: 'the last name required , cannot empty' } } }, email: { validators: { notempty: { message: 'the email address required' }, emailaddress: { message: 'the input not valid email address' } } }, gender: { validators: { notempty: { message: 'the gender required' } } } }, submithandler: function(validator, form, submitbutton) { var fullname = [validator.getfieldelements('firstname').val(), validator.getfieldelements('lastname').val()].join(' '); $('#hellomodal') .find('.modal-title').html('hello ' + fullname).end() .modal(); } }); }); </script> </head> <body> <jsp:include page="header.jsp" flush="true" /> <br> <br> <br> <br> <form id="registerform" class="form-horizontal"> <div class="form-group"> <label class="col-md-3 control-label">full name</label> <div class="col-md-4"> <input type="text" class="form-control" name="firstname" /> </div> <div class="col-md-4"> <input type="text" class="form-control" name="lastname" /> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">email address</label> <div class="col-md-6"> <input type="text" class="form-control" name="email" /> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">gender</label> <div class="col-md-6"> <div class="radio"> <label><input type="radio" name="gender" value="male" /> male</label> </div> <div class="radio"> <label><input type="radio" name="gender" value="female" /> female</label> </div> <div class="radio"> <label><input type="radio" name="gender" value="other" /> other</label> </div> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-8"> <button type="submit" class="btn btn-primary">say hello</button> </div> </div> </form> </body> </html>
your problem here, you've included jquery plugin before jquery itself...
<script type="text/javascript" src="validator/src/js/bootstrapvalidator.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> the bootstrap validator plugin jquery plugin, jquery library must included first. since depends on bootstrap, should come after too...
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script type="text/javascript" src="validator/src/js/bootstrapvalidator.js"></script> 
Comments
Post a Comment