Bootstrap Form Validation - цвет не меняется

Я следил за этим link, чтобы построить проверку формы, состоящую из имени и имени пользователя на моем локальном хосте.Bootstrap Form Validation - цвет не меняется

Проблема, с которой я столкнулся, заключается в том, что когда я щелкнул, зарегистрируйтесь, когда оба поля пусты, появляется ошибка «Поле обязательна», но когда у меня было имя или имя пользователя, отображается «ОК!». в красном, хотя я назначил css, чтобы он был зеленым под label.success.

Пожалуйста, помогите.

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 a 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">&times;</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>

источник

2016-09-13 user3820292

Почему у вас есть имя: { required: true, required: true }, '? – madalinivascu

Я набрал лишний случай, не осознавая – user3820292

Вы должны использовать "имеет-успех", "Хас-предупреждение" или "есть-ошибки" классы на формы ввода обертке

<div class="form-group has-success"> 
    <label class="control-label" for="inputSuccess1">Input with success</label> 
    <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2"> 
    <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> 
</div> 
<div class="form-group has-warning"> 
    <label class="control-label" for="inputWarning1">Input with warning</label> 
    <input type="text" class="form-control" id="inputWarning1"> 
</div> 
<div class="form-group has-error"> 
    <label class="control-label" for="inputError1">Input with error</label> 
    <input type="text" class="form-control" id="inputError1"> 
</div>

Кстати, использование! Важно, это не очень хорошая идея, и в настоящее время она нахмурилась. Если вы хотите изменить стандартный цвет Bootstrap, вы должны скомпилировать его из версии SASS или LESS. У них также есть mixins, которые позволяют применять стили бутстрапа на пользовательских HTML-классах.

источник

2016-09-13 05:59:08 EternalLight

Bootstrap Form Validation - цвет не меняется

ответ

Смежные вопросы