html - form user name prompt and error prompt are displayed separately?

Question

Click the input box to display the user name prompt. Click the Register Now button to display an error prompt under the input box

<form class="form-horizontal" name="checkForm" ng-init="isEmpty=false;">
    <p class="form-group">
        <label class="col-sm-3 control-label">用 户 名</label>
        <p class="col-sm-8 account">
            <input type="text" class="form-control showHide" placeholder="您的账户名和登录名"
                ng-model="account"
                name="account"
                required="required"
                ng-pattern="regularList.account"
                ng-blur="checkForm.account.$blured = false;"
                ng-focus="checkForm.account.$blured = true;"
                autocomplete="off"/>
            <span ng-class="{'right':(checkForm.account.$error.pattern),'error':checkForm.account.$valid}"></span>
        </p>
        <span ng-messages="isEmpty && checkForm.account.$blured && checkForm.account.$error" role="alert">
            <span class="error_text" ng-message="required" style="color: #ff0000">用户名不能为空</span>
        </span>
        <span ng-messages="checkForm.account.$blured && checkForm.account.$error" role="alert">
            <span class="error_text" ng-message="pattern"style="color: #ff0000">用户名为4-20位中文数字与英文字母组成！</span>
        </span>
    </p>
    <p class="tip-container" ng-if="checkForm.account.$blured==true">
        <p class="input-tip" ng-show="checkForm.account.$blured">
            <i></i>
            <span>!支持中文、字母、数字、“-”“_”的组合，4-20个字符</span>
        </p>
    </p>

The specific effects are as follows

Now I am entering content and I don’t want an error message to be displayed
My current problem is that when I enter the corresponding content, there will be an error message. The effect is as follows

Purpose: No error will be prompted when entering content. Click to register immediately. If it does not meet the corresponding specifications, an error will be prompted again.
Please give me some advice, thank you

Answer 1

Also drunk. . .
<input type="text" class="form-control showHide" placeholder="Your account name and login name"

            ng-model="account"
            ng-pattern="regularList.account"/>

<span ng-show="showAccountError" role="alert">

        <span class="error_text" style="color: #ff0000">用户名为4-20位中文数字与英文字母组成！</span>

</span>
When the user submits, use regular expressions in the controller to determine whether $scope.account is legal. If it is not legal, set $scope.showAccountError=true. Set false to this variable when the page is initialized.