gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 10:45:03 24 4
gpt4 key购买 nike

我有一个表单,其中有几个文本区域和带有标签文本的引导 UI 星级。我已将所有文本区域和星级评定设置为必填字段。

当我单击提交按钮时,我想将文本区域 ()/星级 () 的所有标签文本(即 )更改为红色字体,并在所有无效字段的文本区域周围使用红色边框。下面是我的代码,它不起作用。

我希望在不输入任何内容的情况下单击保存按钮时发生以下情况。您能告诉我如何实现这 3 项吗?

  1. 将无效文本区域周围的边框更改为红色
  2. 将无效文本区域标签的字体颜色更改为红色
  3. 将无效星级(如果用户未选择至少 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>
<br />
<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;

}

最佳答案

这是一个fiddle按照您的描述进行以下工作

提交按钮:(这将设置提交为真)

<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>
<br />
<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;
}

关于forms - 提交表单angularjs后,将所有标签的文本颜色更改为红色并为所有无效字段显示红色边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23020824/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com