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=""> 用 户 名 </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
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
Place ng-class in p in the outer package, and add corresponding styles to wanning and error