javascript - Bootstrap Form Validation - color doesn't change -
i followed link build form validation consist of name , username @ localhost.
the problem facing when clicked sign when both fields empty, error "the field required" displays when had input name or username, displays "ok!" in red though assigned css green under label.success.
please help.
index.html
body { width: 100%; height: 100%; } html { width: 100%; height: 100%; } @import url("assets/css/bootstrap.min.css"); @import url("assets/css/bootstrap-responsive.min.css"); label.valid { font-weight: bold; color: green; padding: 2px 8px; margin-top: 2px; } label.error { font-weight: bold; color: red; padding: 2px 8px; margin-top: 2px; }<!doctype html> <html lang="en"> <head> <title>form</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="assets/js/jquery-1.7.1.min.js"></script> <script src="assets/js/jquery.validate.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"> <script> addeventlistener('load', prettyprint, false); $(document).ready(function() { $('pre').addclass('prettyprint linenums'); }); </script> <link rel="stylesheet" type="text/css" href="css/style.css" </head> <body> <div class="container"> <a class="btn btn-primary" data-toggle="modal" data-target="#mymodal" href="#">open form</a> <div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">close</span> </button> <h4 class="modal-title" id="mymodallabel">modal title</h4> </div> <form class="form-horizontal" id="registration-form" role="form" data-async data-target="#mymodal" action="#" method="post"> <div class="modal-body"> <div class="form-control-group row"> <label for="name " class="col-md-2 control-label">name</label> <div class="col-md-10 controls"> <input type="text" class="form-control" id="name" placeholder="enter name" name="name" /> </div> </div> <div class="form-control-group row"> <label for="username " class="col-md-2 control-label">username</label> <div class="col-md-8 controls"> <input type="text" class="form-control" id="username" placeholder="enter username" name="username" /> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-primary" type="submit">sign up</button> <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button> </div> </form> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function() { $('#registration-form').validate({ rules: { name: { required: true, required: true }, username: { minlength: 6, required: true }, agree: "required" }, highlight: function(element) { $(element).closest('.form-control-group').removeclass('success').addclass('error'); }, success: function(element) { element .text('ok!').addclass('valid') .closest('.form-control-group').removeclass('error').addclass('success'); } }); }); // end document.ready </script> </body> </head> </html>
you should use "has-success", "has-warning" or "has-error" classes on form input wrapper
<div class="form-group has-success"> <label class="control-label" for="inputsuccess1">input success</label> <input type="text" class="form-control" id="inputsuccess1" aria-describedby="helpblock2"> <span id="helpblock2" class="help-block">a block of text breaks onto new line , may extend beyond 1 line.</span> </div> <div class="form-group has-warning"> <label class="control-label" for="inputwarning1">input warning</label> <input type="text" class="form-control" id="inputwarning1"> </div> <div class="form-group has-error"> <label class="control-label" for="inputerror1">input error</label> <input type="text" class="form-control" id="inputerror1"> </div> by way, using !important not idea , frowned upon. if want change standard bootstrap color, should compile sass or less version. have mixins allow apply bootstrap styles on custom html-classes.
Comments
Post a Comment