关于正确处理bootstrap验证messgaes对齐

时间：2016-10-13 16:48:47

标签： javascript jquery html css twitter-bootstrap

我是bootstrap的新手。

我想更改验证消息现在的显示方式，以便它显示在单独的行中，请建议如何在当前代码中完成。请参阅以下屏幕截图。

The screenshot of current validation messages

＆＃13;
＆＃13; 
/*
/* Created by Filipe Pina
 * Specific styles of signin, register, component
 */

/*
 * General styles
 */

body,
html {
  height: 100%;
  background-repeat: no-repeat;
  background-color: #d3d3d3;
  font-family: 'Oxygen', sans-serif;
  background-image: url("/images/plants-leaf_gro.jpg");
}
.main {
  margin-top: 70px;
}
h1.title {
  font-size: 50px;
  font-family: 'Passion One', cursive;
  font-weight: 400;
}
h1 {
  color: white;
}
hr {
  width: 10%;
  color: #fff;
}
.form-group {
  margin-bottom: 15px;
}
label {
  margin-bottom: 15px;
}
input,
input::-webkit-input-placeholder {
  font-size: 11px;
  padding-top: 3px;
}
.main-login {
  background-color: #fff;
  /* shadows and rounded borders */
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.form-group .control-label:after {
  content: "  *";
  color: red;
}
.main-center {
  margin-top: 30px;
  margin: 0 auto;
  max-width: 570px;
  padding: 40px 40px;
}
.login-button {
  margin-top: 5px;
}
.login-register {
  font-size: 11px;
  text-align: center;
}
/* Color of invalid field */

.has-error label.error {
  color: #a94442;
}
/* Color of valid field */

.has-success .control-label {
  color: #3c763d;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="css/Register.css">
  <script type="text/javascript" src="../javascript/bootstrap.js"></script>
  <script type="text/javascript" src="/WebContent/Javascript/countries.js"></script>

  <!-- Website CSS style 
		<link rel="stylesheet" type="text/css" href="assets/css/main.css">
        -->



  <!-- Website Font style -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

  <!-- Google Fonts -->
  <link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>

  <title>Admin</title>
</head>

<body>
  <div class="container">
    <div class="row main">
      <div class="panel-heading">
        <div class="panel-title text-center">
          <h1 class="title"></h1>
          <hr />
        </div>
      </div>
      <div class="main-login main-center">
        <form class="form-horizontal" id="registerForm" method="post" role="form" action="#">
          <div class="form-group">
            <label for="name" class="cols-sm-2 control-label">Your Name</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                <input type="text" class="form-control" name="name" id="name" placeholder="Enter your Name" />
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="email" class="cols-sm-2 control-label">Your Email</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
                <input type="text" class="form-control" name="email" id="email" placeholder="Enter your Email" />
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="username" class="cols-sm-2 ">Company Name</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span>
                <input type="text" class="form-control" name="companyName" id="companyName" placeholder="Enter your Company Name" />
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="username" class="cols-sm-2 ">Address</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-building fa" aria-hidden="true"></i></span>
                <input type="text" class="form-control" name="Address" id="Address" placeholder="Enter your Address" />
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="username" class="cols-sm-2 "></label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon">State</span>
                <select id="state" name="state" class="form-control"></select>
                <span class="input-group-addon">City</span>
                <input type="text" class="form-control" name="city" id="city" placeholder="Enter your City" />
                <script type="text/javascript">
                  print_city("state");
                </script>
                <span class="input-group-addon">Zip</span>
                <input type="text" class="form-control" name="zipCode" id="zipCode" placeholder="Enter your Zip" />
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="password" class="cols-sm-2 ">Phone Number</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-phone fa-lg" aria-hidden="true"></i></span>
                <input type="password" class="form-control" name="phonenumber" id="phonenumber" placeholder="Enter your Phone Number" />
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="password" class="cols-sm-2 control-label">Password</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
                <input type="password" class="form-control" name="password" id="password" placeholder="Enter your Password" />
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="confirm" class="cols-sm-2 control-label">Confirm Password</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
                <input type="password" class="form-control" name="confirm" id="confirm" data-match-error="Whoops, these don't match" placeholder="Confirm your Password" />
              </div>
            </div>
          </div>

          <div class="form-group ">
            <button type="submit" class="btn btn-primary btn-lg btn-block login-button" onclick="Register();">Register</button>
          </div>
          <div class="login-register">
            <a href="index.php">Login</a>
          </div>
        </form>
      </div>
    </div>
  </div>

</body>

<script>
  $('#registerForm').validate({
    rules: {
      name: {
        minlength: 2,
        required: true
      },
      companyName: {
        minlength: 2,
        required: true
      },
      contactName: {
        minlength: 2,
        required: true
      },
      email: {
        required: true,
        email: true
      },
      Address: {
        minlength: 2,
        required: true
      },
      phonenumber: {
        minlength: 10,
        required: true
      }

    },
    highlight: function(element) {
      $(element).closest('.form-group').removeClass('success').addClass('has-error');
    },
    success: function(element) {
      element.addClass('valid')
        .closest('.form-group').removeClass('error').addClass('has-success');
    }
  });
</script>

</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

更改validate添加错误元素的位置，因此它位于引导程序input-group之外。

errorPlacement: function(error, element) {
  element.parent().after(error);
}

highlight和success函数也使用不同的错误类。将highlight更改为：

$(element).closest('.form-group').removeClass('success').addClass('has-error');

更新：不要将类valid添加到验证标签，而是删除元素。

success: function(element) {
  element.closest('.form-group').removeClass('has-error').addClass('has-success');
  element.remove();
}


$('#registerForm').validate({
  rules: {
    name: {
      minlength: 2,
      required: true
    },
    companyName: {
      minlength: 2,
      required: true
    },
    contactName: {
      minlength: 2,
      required: true
    },
    email: {
      required: true,
      email: true
    },
    Address: {
      minlength: 2,
      required: true
    },
    phonenumber: {
      minlength: 10,
      required: true
    }

  },
  highlight: function(element) {
    $(element).closest('.form-group').removeClass('success').addClass('has-error');
  },
  success: function(element) {
    element.closest('.form-group').removeClass('has-error').addClass('has-success');
    element.remove();
  },
  errorPlacement: function(error, element) {
    element.parent().after(error);
  }
});
/*
/* Created by Filipe Pina
 * Specific styles of signin, register, component
 */

/*
 * General styles
 */

body,
html {
  height: 100%;
  background-repeat: no-repeat;
  background-color: #d3d3d3;
  font-family: 'Oxygen', sans-serif;
  background-image: url("/images/plants-leaf_gro.jpg");
}
.main {
  margin-top: 70px;
}
h1.title {
  font-size: 50px;
  font-family: 'Passion One', cursive;
  font-weight: 400;
}
h1 {
  color: white;
}
hr {
  width: 10%;
  color: #fff;
}
.form-group {
  margin-bottom: 15px;
}
label {
  margin-bottom: 15px;
}
input,
input::-webkit-input-placeholder {
  font-size: 11px;
  padding-top: 3px;
}
.main-login {
  background-color: #fff;
  /* shadows and rounded borders */
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.form-group .control-label:after {
  content: "  *";
  color: red;
}
.main-center {
  margin-top: 30px;
  margin: 0 auto;
  max-width: 570px;
  padding: 40px 40px;
}
.login-button {
  margin-top: 5px;
}
.login-register {
  font-size: 11px;
  text-align: center;
}
/* Color of invalid field */

.has-error label.error {
  color: #a94442;
}
/* Color of valid field */

.has-success .control-label {
  color: #3c763d;
}
<!DOCTYPE html>
<html lang="en">

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="css/Register.css">
  <script type="text/javascript" src="../javascript/bootstrap.js"></script>
  <script type="text/javascript" src="/WebContent/Javascript/countries.js"></script>

  <!-- Website CSS style 
		<link rel="stylesheet" type="text/css" href="assets/css/main.css">
        -->



  <!-- Website Font style -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

  <!-- Google Fonts -->
  <link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>

  <title>Admin</title>
</head>

<body>
  <div class="container">
    <div class="row main">
      <div class="panel-heading">
        <div class="panel-title text-center">
          <h1 class="title"></h1>
          <hr />
        </div>
      </div>
      <div class="main-login main-center">
        <form class="form-horizontal" id="registerForm" method="post" role="form" action="#">
          <div class="form-group">
            <label for="name" class="cols-sm-2 control-label">Your Name</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                <input type="text" class="form-control" name="name" id="name" placeholder="Enter your Name" />
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="email" class="cols-sm-2 control-label">Your Email</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
                <input type="text" class="form-control" name="email" id="email" placeholder="Enter your Email" />
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="username" class="cols-sm-2 ">Company Name</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span>
                <input type="text" class="form-control" name="companyName" id="companyName" placeholder="Enter your Company Name" />
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="username" class="cols-sm-2 ">Address</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-building fa" aria-hidden="true"></i></span>
                <input type="text" class="form-control" name="Address" id="Address" placeholder="Enter your Address" />
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="username" class="cols-sm-2 "></label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon">State</span>
                <select id="state" name="state" class="form-control"></select>
                <span class="input-group-addon">City</span>
                <input type="text" class="form-control" name="city" id="city" placeholder="Enter your City" />
                <script type="text/javascript">
                  print_city("state");
                </script>
                <span class="input-group-addon">Zip</span>
                <input type="text" class="form-control" name="zipCode" id="zipCode" placeholder="Enter your Zip" />
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="password" class="cols-sm-2 ">Phone Number</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-phone fa-lg" aria-hidden="true"></i></span>
                <input type="password" class="form-control" name="phonenumber" id="phonenumber" placeholder="Enter your Phone Number" />
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="password" class="cols-sm-2 control-label">Password</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
                <input type="password" class="form-control" name="password" id="password" placeholder="Enter your Password" />
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="confirm" class="cols-sm-2 control-label">Confirm Password</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
                <input type="password" class="form-control" name="confirm" id="confirm" data-match-error="Whoops, these don't match" placeholder="Confirm your Password" />
              </div>
            </div>
          </div>

          <div class="form-group ">
            <button type="submit" class="btn btn-primary btn-lg btn-block login-button" onclick="Register();">Register</button>
          </div>
          <div class="login-register">
            <a href="index.php">Login</a>
          </div>
        </form>
      </div>
    </div>
  </div>

</body>

</html>

答案 1 :(得分：0)

更改

.has-error label.error {
    color: #a94442;
}

到

.has-error label.error {
    color: #a94442;
    display:block;
}
相关问题
最新问题