将所有标签的文本颜色更改为红色，并在提交表单angularjs后显示所有无效字段的红色边框-Java 学习之路

我有一个表单，它有几个文本区域和bootstrap UI星级评级及其标签文本 . 我已将所有文本区域和星级设置为必填字段 .

我想将文本区域（）/星级（）的所有标签文本（即）更改为红色字体，并且当我单击提交按钮时，所有无效字段的文本区域周围都有红色边框 . 以下是我的代码，它不起作用 .

当我点击保存按钮而不输入任何内容时，我希望发生以下情况 . 你能告诉我如何实现这三项吗？

将无效文本区域周围的边框更改为红色
将无效文本区域的标签的字体颜色更改为红色
更改无效星标签（如果用户未选择至少1星评级）等级的正面颜色变为红色 .

预先感谢您的帮助 .

这是html：

<div class="row">
            <div class="col-lg-7 col-md-12">
                <form name="addReviewForm" class="addReview-form" role="addReviewForm" ng-class="{submitted:addReviewForm.submitted}">
                    <div class="form-group">
                        <label for="reviewTitle">Review Title:</label>
                        

                        <textarea ng-model="review.title" id="reviewTitle" class="form-control" name="reviewTitle" rows="3" placeholder="Write your review title here" required></textarea>
                    </div>

                    <div class="form-group">
                        <label>Review:</label>
                        <textarea ng-model="review.comments" class="form-control" name="comments" rows="3" placeholder="Write your review here" required></textarea>
                    </div>
                </form>
            </div>
            <div class="col-lg-5 col-md-12">
                <dl class="dl-horizontal">
                    <dt>On time deliver:</dt>
                    <dd>
                        <rating value="review.Time" max="max" readonly="false" rating-states="ratingStates" name="onTime" required></rating>
                    </dd>
                    <dt>Customer service:</dt>
                    <dd>
                        <rating value="review.CustomerService" max="max" readonly="false" rating-states="ratingStates" name="customerService" required></rating>
                    </dd>
            </div>
        </div>

这是单击“保存”按钮时调用的函数：

$scope.addReview = function (review) {
    if ($scope.addReviewForm.$valid) {
        //submit as normal

    }
    else {
        $scope.addReviewForm.submitted = true;
    }
}

这是我的css：

addReviewForm.submitted .ng-dirty.ng-invalid{ 
    border: 1px solid red; 
} 
addReviewForm.submitted .ng-dirty.ng-valid{
     border: 1px solid green; 

}

1 回答

这是一个fiddle，其中包含以下工作方式

提交按钮:(这将设置提交为true）

<button type="submit" ng-click="submitted=true">Submit Button</button>

HTML :(使用ng-class来确定字段是否脏且有效）

<div ng-app class="row" ng-init="review = {title: 'abc'}">
    <div class="col-lg-7 col-md-12">
        <form name="addReviewForm" class="addReview-form" role="addReviewForm" ng-class="{submitted:submitted}">
            <div class="form-group" ng-class="{'show-valid': (addReviewForm.reviewTitle.$valid && addReviewForm.reviewTitle.$dirty), 'show-invalid': (addReviewForm.reviewTitle.$invalid && addReviewForm.reviewTitle.$dirty)}">
                <label for="reviewTitle">Review Title:</label>
                

                <textarea ng-model="review.title" id="reviewTitle" class="form-control" name="reviewTitle" rows="3" placeholder="Write your review title here" required></textarea>
            </div>
            <button type="submit" ng-click="submitted=true">Submit Button</button>
        </form>
    </div>
</div>

CSS :(控制显示的样式）

.submitted .show-invalid textarea, .submitted .show-invalid input, .submitted .show-invalid select {
    border: 1px solid red;
}
.submitted .show-valid textarea, .submitted .show-valid input, .submitted .show-valid select {
    border: 1px solid green;
}

回复于 2024-04-16T17:22:11+08:00

将所有标签的文本颜色更改为红色，并在提交表单angularjs后显示所有无效字段的红色边框

1 回答

相关问题