부트 스트랩 폼 유효성 검사 - 색상이 변경되지 않음

다음은이 link에 따라 로컬 호스트의 이름과 사용자 이름으로 구성된 양식 유효성 검사를 작성합니다.부트 스트랩 폼 유효성 검사 - 색상이 변경되지 않음

내가 직면 한 문제는 두 필드가 모두 비어있을 때 가입을 클릭하면 "필드가 필요합니다"라는 오류가 표시되지만 이름이나 사용자 이름을 입력하면 "확인"이 표시된다는 것입니다. 나는 label.success 아래에서 초록색으로 css를 지정 했음에도 불구하고 빨간색으로.

도와주세요.

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

왜 'name : { 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>

그런데! important를 사용하는 것은 좋은 생각이 아니며 현재는 눈살을 찌푸리게됩니다. 표준 부트 스트랩 색상을 변경하려면 SASS 또는 LESS 버전에서 컴파일해야합니다. 또한 사용자 정의 HTML 클래스에 부트 스트랩 스타일을 적용 할 수있는 믹스 인이 있습니다.

출처

2016-09-13 05:59:08 EternalLight

부트 스트랩 폼 유효성 검사 - 색상이 변경되지 않음

답변

관련 문제