Arpit Saxena Arpit Saxena - 1 month ago 7
CSS Question

Regarding handling bootstrap validation messgaes alignment correctly

I am new to bootstrap. So, please don't lash out or downvote if my question sounds stupid to you.

I want to change how the validation message appears now so that it appears in
a separate line, please suggest how it can be done in the current code. Please refer to the following screenshot.

The screenshot of current validation messages



/*
/* 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>

<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>




Answer

Change where the error element is added by validate, so it is outside of the bootstrap input-group.

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

Also the highlight and success functions use different error classes. Change highlight to:

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

$('#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('has-error').addClass('has-success');
  },
  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>

Comments