Required red Mark on a visualforce page -自定义字段如何必填标红

<apex:pageBlockSectionItem >
<apex:outputLabel value="Status" for="Status"/>
<apex:outputPanel styleClass="requiredInput" layout="block"> 
<apex:outputPanel styleClass="requiredBlock" layout="block"/>
<apex:selectList id="chooseStatus" value="{!Contact_Exemption_ACU__c.Status__c}" size="1" required="true" >
<apex:selectOption itemValue="Approved" itemLabel="Approved"/>
<apex:selectOption itemValue="Closed" itemLabel="Closed"/> 
</apex:selectList>
</apex:outputPanel> 
</apex:pageBlockSectionItem>

Hey, above is the code to get the red mark for an reqd attribute. Although I have used an standard field, any field can be used in the value in Select List. Also, if you need to display the error message later,following is the code.


<apex:outputPanel styleClass="requiredInput" layout="block">
<apex:inputField id="ACU_held_in_Customer" value="{!Contact_Exemption_ACU__c.ACU_held_in_Customer__c}"/> 
<apex:outputPanel styleClass="errorMsg" layout="block" rendered="{!errorACUheldInCustomer}">
<strong>Error:</strong> {!errorMessage}
</apex:outputPanel>
</apex:outputPanel>

 After doing the validation in the Controller, set the errorACUheldInCustomer to true and set the errorMessage.

以上摘自https://developer.salesforce.com/forums/ForumsMain?id=906F000000095BZIAY

打开debug工具,分析:一般sfdc标准组件,只要加上required=true就会出现如图变红的渲染效果。

在自定义的字段里是没有如图的两个div的,以上解决方法就是把连个class放出来了。


a-select 是 Ant Design Vue (AntV) 中的一个下拉选择组件,用于展示选项让用户进行选择。如果你想让它支持必填校验,通常可以通过结合 Vue 的内置验证功能来实现。以下是如何做到的步骤: 1. 安装 `vuelidate` 或者 `vue-validator` 这样的验证库,它们可以帮助你在 Vue 组件中添加验证规则。如果你还没有安装,可以使用 npm 或 yarn 来安装: ```bash npm install vuelidate # 或者 yarn add vuelidate ``` 2. 创建一个验证器实例,通常会创建一个全局的验证器: ```js import { validate } from 'vuelidate'; export default new validate({ selectValue: { required: { message: '请选择一项' }, // 必须填写的验证规则 }, }); ``` 3. 在你的 a-select 组件中,绑定 `v-model` 并使用验证规则: ```html <a-select v-model="selectValue" :placeholder="placeholder" @change="handleSelectChange"> <!-- ... --> </a-select> ``` 4. 在你的组件的 data 和 methods 中,声明 `selectValue` 变量并监听 change 事件: ```js export default { data() { return { selectValue: '', placeholder: '请选择', }; }, methods: { handleSelectChange(value) { this.$v.selectValue.required(value !== ''); // 验证选中值是否为空 if (!this.$v.selectValue.valid) { console.log('输入不能为空'); // 或者显示错误提示 this.showError = true; } }, }, }; ``` 当用户尝试离开输入框或提交表单时,`$v.selectValue.required` 方法会检查 `selectValue` 是否为空,如果为空则返回 false,触发验证失败的回调。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值