带有验证消息的表单设计

Question

我有一个表格，名字和姓是互相联系的。

现在，两者都有自己的验证ng消息。但是，当出现错误时，例如姓，而名没有错误。形式变得非常丑陋。

当两个人中有一个出错时，我怎么能做到这一点呢？

https://plnkr.co/edit/B4qrUgxhntkvwuIPGIBs?p=preview

​

<div class="smallContainer myForm">



  <form name="userForm" ng-name="userForm" ng-submit="signup(userForm.$valid, userForm)" novalidate>

    <!-- First name -->
    <div id="firstName" class="form-group"
      ng-class="{ 'has-error' : userForm.first_name.$touched && userForm.first_name.$invalid,
                  'has-success' : userForm.first_name.$valid }">


      <div class="col-10">

        <input class="form-control" type="text" placeholder="First name"
            name="first_name"
            ng-model="user.first_name"
            ng-minlength="2"
            ng-maxlength="25"
            required>

        <div class="help-block" ng-messages="userForm.first_name.$error" ng-if="userForm.first_name.$touched">
            <p ng-message="minlength">Your name is too short.</p>
            <p ng-message="maxlength">Your name is too long.</p>
            <p ng-message="required">Your name is required.</p>

        </div>

      </div>
    </div>
    <!-- Last name -->
    <div id="lastName" class="form-group"
      ng-class="{ 'has-error' : userForm.last_name.$touched && userForm.last_name.$invalid,
                  'has-success' : userForm.last_name.$valid }">


      <div class="col-12">
        <input class="form-control" type="text" placeholder="Last name"
            name="last_name"
            ng-model="user.last_name"
            ng-minlength="2"
            ng-maxlength="25"
            required>

        <div class="help-block" ng-messages="userForm.last_name.$error" ng-if="userForm.last_name.$touched">
            <p ng-message="minlength">Your name is too short.</p>
            <p ng-message="maxlength">Your name is too long.</p>
            <p ng-message="required">Your name is required.</p>
        </div>
      </div>
    </div>
    <!-- Email-->
    <div class="form-group"
      ng-class="{ 'has-error' : userForm.email.$touched && userForm.email.$invalid,
                  'has-success' : userForm.email.$valid }">

      <div class="col-10">
        <input class="form-control" type="email" placeholder="Email"
            name="email"
            ng-model="user.email"
            ng-minlength="2"
            ng-maxlength="50"
            ng-pattern="emailFormat"
            required>

        <div class="help-block" ng-messages="userForm.email.$error" ng-if="userForm.email.$touched">
            <p ng-message="maxlength">Your email is too long.</p>
            <p ng-message="required">Your email is required.</p>
            <p ng-message="pattern">This is not a valid email.</p>
            <p ng-message="validationError">This email is already taken.</p>
        </div>

      </div>
    </div>
    <!-- Password1-->
    <div class="form-group"
      ng-class="{ 'has-error' : userForm.password.$touched && userForm.password.$invalid,
                  'has-success' : userForm.password.$valid }">


      <div class="col-10">
        <input class="form-control" type="password" placeholder="Password"
            name="password"
            ng-model="user.password"
            ng-minlength="8"
            ng-maxlength="30"
            required>

        <div class="help-block" ng-messages="userForm.password.$error" ng-if="userForm.password.$touched">
            <p ng-message="minlength">Your password is too short.</p>
            <p ng-message="maxlength">Your password is too long.</p>
            <p ng-message="required">Your password is required.</p>
        </div>
      </div>
    </div>
    <!-- Password2-->
    <div class="form-group"
      ng-class="{ 'has-error' : userForm.password2.$touched && userForm.password2.$invalid,
                  'has-success' : userForm.password2.$valid }">


      <div class="col-10">
        <input class="form-control" type="password" placeholder="Confirm your password"
            name="password2"
            ng-model="user.password2"
            ng-minlength="8"
            ng-maxlength="30"
            data-password-verify="user.password"
            required>

        <div class="help-block" ng-messages="userForm.password2.$error" ng-if="userForm.password2.$touched">
            <p ng-message="passwordVerify ">Passwords do not match.</p>
        </div>
      </div>
    </div>

    <div>
      <p class="cover-3">Are you ready to find your</p> <p class="cover-1 cover-3">peers?</p>
      <button id="startButton" type="submit" class="btn btn-primary btn-lg center-block" >Start now</button>
    </div>

  </form>
</div>

​

​

Answer 1

你需要加上：

vertical-align:top;

在这里，代码：

#firstName {
  display: inline-block;
  width: 250px;
  vertical-align:top;
}

#lastName {
  display: inline-block;
  vertical-align:top;
  width: 350px;
}

到前两个输入字段。

https://plnkr.co/edit/F9kWfWPF8tJyE4HvfdbH?p=preview