必须有所选择的单选框

cybozu发表于:2016年10月09日 18:30:45更新于:2022年07月27日 10:27:16

开发者中心包含此范例模板(必须有所选择的单选框),请前往开发者中心下载学习。

这次的主题是“必须有所选择的单选框”。
说到这个,肯定会有人问:“咦?kintone的单选框定义了默认值后,不是一定会有一个被选中,可保存的吗?” 这个是肯定的,但是有时候在投票和活动用的应用里,也有希望使用者选择默认值以外的项目,这种情况存在吧。

接下来,将为大家介绍如何通过JavaScript自定义来实现以下功能:
“通过画面添加和更新记录时,如选择默认选项,会显示错误”。

完成设想

00157fb446fedb9ca94fb9e05e60ce5

应用和字段的准备

先作成应用,需要准备下面这些字段。

字段种类字段代码项目
单选框Radio

未选择
台湾
香港
冲绳
轻井泽
伊豆
聚餐
纪念品

字段名是,“希望怎样的公司旅游”。考虑到有些同事因公司旅游的日程或家里的事情导致无法成行,所以也准备了聚餐和纪念品的选项。

 

编程

考虑点

  • 在表单里设置需要校验的单选框的字段代码,通过列举字段代码可对多个字段进行校验。

  • 使用获取表单信息API的情况,若表单信息发生了变化,可不更改代码,错误信息也会跟着变化。这个非常方便。

JavaScript代码

下面的代码描述了记录保存时的事件和想要校验的单选框的选项。

(function() {
    "use strict";
    // 记录添加、更改、列表更改提交的事件
    var ev = ['app.record.create.submit', 'app.record.index.edit.submit', 'app.record.edit.submit'];
    kintone.events.on(ev, function(event) {
        // 获取记录信息
        var record = event.record;
        var selection = record['Radio']['value'];
        var params = {
            app: kintone.app.getId()
        };
        return kintone.api(kintone.api.url('/k/v1/app/form/fields', true), 'GET', params).then(function(resp) {
            var name = resp.properties.Radio.label;
            if (selection === '未选择') {
                var errMessage = "不可选择「" + selection + "」。";
                // 在字段的下面显示错误信息
                record['Radio']['error'] = errMessage;
                // 在记录上显示错误信息
                event.error = "不可选择的选项名" + "「" + name + "」" + "的「" + selection + "」。";
            }
            return event;
        });
    });
})();

该Tips在2016年5月版中进行过确认。