検証メッセージを使用したフォームデザイン

Question

私はフォームを持っています。ここでは、名と姓が後になります。

ここでは、両方とも独自の検証メッセージを持っています。しかし、例えば、姓と名はエラーがありません。フォームは本当に醜いなります。

2人のうちの1人にエラーが発生した場合、どうすればよいでしょうか両方が上がります。

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

最初の2つの入力フィールドへ。

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