У меня есть форма, в которой у меня есть некоторые поля ввода. Некоторые из них - это обязательные поля, а некоторые - электронная почта.
Я использую атрибут html5 required для обязательных полей и атрибут type = "email" для полей электронной почты.
Мой вопрос после нажатия кнопки отправки мне нужно показать красную рамку для всех недопустимых полей.
Это моя форма
<form name="addRelation">
<label>First Name</label>
<input type="text" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/><br/>
<span class="text-error" data-ng-show="addRelation.submitted && addRelation.FirstName.$error.required">first Name is required</span><br/>
<label>Last Name</label>
<input type="text" placeholder="Last Name" data-ng-model="model.lastName" id="LastName" name="LastName" required/><br/>
<span class="text-error" data-ng-show="addRelation.submitted && addRelation.LastName.$error.required">Last Name is required</span><br/>
<label>Email</label>
<input type="email" placeholder="Email" data-ng-model="model.email" id="Email" name="Email" required/><br/>
<span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.required">Email address is required</span><br/>
<span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.email">Email address is not valid</span><br/>
<input class="btn" data-ng-click="save(model)" type="button" value="SAVE" />
</form>
и моя функция сохранения.
$scope.save= function (model) {
if ($scope.addRelation.$valid) {
//form is valid- so save it to DB
}
else {
//if form is not valid set $scope.addRelation.submitted to true
$scope.addRelation.submitted=true;
}
};
})
Теперь, когда я нажимаю кнопку "Сохранить", не заполняя ничего, все ошибки (промежутки) отображаются. Но я хочу показать красную границу для всех недопустимых полей.
Я пробовал следующие случаи:
input.ng-dirty.ng-invalid{border:1px solid black;}
но это не удается, когда пользователь напрямую нажимает кнопку отправки (не касаясь полей ввода)
input.ng-invalid{border:1px solid black;}
это показывает красную рамку, как только пользователь открывает форму регистрации.
Пожалуйста, помогите.