angular.js - input input box, border changes with error?
黄舟
黄舟 2017-05-15 17:04:04
0
2
939

1. When the content entered in the input box is not standardized and the form is submitted, the input input box will prompt an error, and the outer p border of the input will turn red. When I re-enter the input box, the first Starting from the first input character, the color of the outer p border changes to the normal color.

The following is the code

<form action="" class="signup_form" method="post" name="checkForm" ng-init="isEmpty=false;">
    <p class="form_item  form_item_account">
        <label for=""> 用&nbsp;&nbsp;户&nbsp;&nbsp;名 </label>
        <input type="text" class="form_account" placeholder="您的账户名和登录名"
                id="form_item_account"
                ng-model="account"
                name="account"
                required
                ng-pattern="regularList.account"
                ng-class="{'warnning':checkForm.account.$focused,'error':(!isEmpty && checkForm.account.$blured &&
                 checkForm.account.$error.pattern) || (isEmpty && checkForm.account.$invalid)}"
                ng-blur="checkForm.account.$blured = true;checkForm.account.$focused = false;"
                ng-focus="checkForm.account.$focused = true;checkForm.account.$blured = false;accountValid()"
                autocomplete="off"
                >
        <i></i>
    </p>
    <p class="form_item">
        <button class="btn_register" id="btn_register" ng-click="isEmpty=true; confirm()">立即注册</button>
        <i></i>
    </p>
</form>

Add the form_item_error class in js, and the outer p border of the input box turns red. Remove this class, and the outer p border becomes normal

function checkError(form){
    var item = form.parent();
    if(form.hasClass("error")){
        item.addClass("form_item_error");
    }else if(item.hasClass("form_item_error")){
            item.removeClass("form_item_error");

    }else{
        item.removeClass("form_item_error");
    }
}
$scope.confirm = function () {
            $scope.accountValid = function(){
                checkError(form_account);
            }
 }

Effect
Error

In case of error, enter the content and the border will return to normal

Please give me some advice, thank you

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

reply all(2)
为情所困

I put your code on jsFiddle and made some changes to meet your requirements. If you don’t see the effect, you have to go over the wall. The demo is as follows, you can preview it yourself, and it also helps you to add the submit button if the form is incomplete.
Demo

PHPzhong

Place ng-class in p in the outer package, and add corresponding styles to wanning and error

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template