Geek Answers Handbook

How to keep horizontally located input fields always consistent?

I have forms on a webpage that have a great style issue.

One of the requirements for forms is that whenever a form contains an error, an error message should appear between the label and the input field. Whenever there is no error, there should only be a label and an input field. See the picture below:

enter image description here

The problem is that whenever an error message appears, the input field is shifted down, and the input fields on the same line are no longer aligned with each other. I need to enter the fields horizontally apart for alignment. In other words, it should look like this (ignore the silly watermark):

enter image description here

Here are the basic things I need to find out:

  • Correct display of the error message between the label and the input field.
  • Always keep input fields in a straight line
  • Keep the label, error message and input field in the same div with each other (they cannot be on separate lines)
  • Perform all three of the above actions at the same time.

This is HTML:

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
<div class="row">
        <div class="col-xs-4">
          <div>Label for first input field!</div>
          <div class="error">Label for first error message!</div>
          <input type="text"/>
        </div>
        <div class="col-xs-4">
          <div>Label for second input field!</div>
          <div class="error">Label for second error message!</div>
          <input type="text"/>
        </div>
        <div class="col-xs-4">
          <div>Label for third input field!</div>
            <!--<div class="error">Label for third error message!</div> -->
          <input type="text"/>
        </div>
      </div>
  </body>

</html>

This is CSS:

.error{
  color:red;
}

This is a link to the plunker: http://plnkr.co/edit/i0RR3XXeevh03TtoBP1M?p=preview

EDIT

This question only concerns the style of these input fields. This is not the code I'm trying to modify, but rather a minimal example that reflects the problem I'm trying to solve. No need to think about the mechanisms by which error messages appear, but rather about style.

+4
source share
2 answers

- , "" . 2 <div> <label>. <br> a <span>, .none. , , . , <labels> position: relative.

DEMO

+1

, . bootstrap . .

:

$('#form').validator().on('submit', function (e) {
  if (e.isDefaultPrevented()) {
    // handle the invalid form...
  } else {
    
  }
})
<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
<div class="row">
  <form role="form" data-toggle="validator">
        <div class="col-xs-4 form-group">
    <label for="Label1" class="control-label">Label 1</label>
    <input type="text" class="form-control" id="Label1" placeholder=" " required></div>

        <div class="col-xs-4 form group">
          <label for="Label2" class="control-label">Label 2</label>
          <input type="text" class="form-control" id="Label2" placeholder=" " required>
        </div>

     
        <div class="col-xs-4 form group">
          <label for="Label3" class="control-label">Label 3</label>
          <input type="text" class="form-control" id="Label3" placeholder=" " required>
       </div>
<div class="row">
    <div class=" col-xs-4 form-group">
      <br>
      <br>
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
  </div>
  </form>
  </div>
  </body>

</html>
Hide result

EDIT: TAKE TWO​​p >

<!DOCTYPE html>
<html>

  <head>
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-transition.js"></script>
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-alert.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.js" /></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script>
    function validate ( form )
    {

  if (form.Label1.value === "") {
    $('.alert').removeClass('hidden');
    form.Label1.focus();
    return false;}
  if (form.Label2.value === "") {
    $('.alert').removeClass('error');
     form.Label2.focus();
     return false;
  }  
return true ;
}
</script>
<style>
.error{
  color:red;
  display:none;}

</style>
  </head>

  <body>
    <form method="post" onsubmit="return validate(this);">
       <div class="row">
        <div class="col-xs-4">
          <label for="Label1" class="control-label">Label for first input field!</label>
          <input type="text" name="Label1" id="Label1"/>
          <div class="alert alert-danger alert-dismissible fade in hidden">
            <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
                <p>Error msg</p>

          </div>

        </div>
        <div class="col-xs-4">
          <label for="Label2" class="control-label">Label for second input field!</label>
          <input type="text" name="Label2" id="Label2"/>
          <div class="alert alert-danger alert-dismissible fade in error">
            <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
                <p>Error msg</p>
          </div>
        </div>
        <div class="col-xs-4">
          <label for="Label3" class="control-label">Label for third input field!</label>
            <!--<label for="error" class="error">Label for third error message!</label>-->
          <input type="text" name="Label3" id="Label3"/>
        </div>
      </div>
      <br>
      <br>
      <button type="submit" class="btn btn-primary">Submit</button></div>

      </form>
  </body>

</html>

, , jsfiddle, .

0

More articles:


All Articles