如何使用Javascript约束验证api进行跨字段检查

我有这个HTML5/CSS3表格

当用户单击“提交”按钮时，我想检查电话类型是否为“其他”，说明是否为空

在：

如何使用执行此操作

---

（请参阅我尝试过的代码和完整的原始问题）

对于涉及实际约束验证的大型应用程序来说，这通常是非常有用的

然而，我并没有看到您对用例和问题进行任何验证。单凭API也无法解决这个问题。无法仅通过API定义select控件与所描述的文本区域之间的关系以及结果行为

您可以通过对触发

change

事件的表单控件作出反应，并在选择

select

控件（在图像中呈现为下拉列表）中选择的选项时，切换文本区域上的

required

属性来解决问题。在我看来，这似乎是满足您需求的简单方法

您不需要让代码调用任何警报或验证表单是否已填写——当所需控件缺少值时，符合要求的用户代理将在尝试提交表单时发出警告，并拒绝提交[不完整]表单。它甚至会将用户指向控件（在您的案例中为文本区域），并向用户发出消息提醒。可以使用约束验证API自定义消息和表单验证的其他方面。但根据我的经验，基本行为可以而且必须是强制性的

考虑以下带有内联（为了示例）脚本的标记（我省略了标签、布局样式甚至提交按钮，所有这些都与演示无关）：

其他
（功能（形式）{
函数更新\u说明\u必需（）{
form.elements.desc.required=（form.elements.phone_type.value==“其他”）；
}
表格.附录列表（“变更”，功能（ev）{
if（ev.target==form.elements.phone\u类型）{
更新_desc_required（）；
}
});
update_desc_required（）；///不能假设选择了任何特定选项
})（document.currentScript.parentElement）；

---

这应该足够了，但我不确定表单的总体设计以及它的可用性，也不确定您试图实现什么。在任何情况下，

“phone”

输入类型应足以让用户输入他们选择的电话号码。

实现您的自定义验证消息（

HTML

、

CSS

和

JS

）。@因此，我不确定您的意思。我不想使用

window.Alert（）

等实现自定义验证消息，我想使用约束验证API实现视觉一致性。见问题的增编

on_submit_do {
  if phone_type == "Other" && trimmed(description) == "" then
    alert_at_component("enter description of other phone type", description)
  else
    continue_as_normal_and_transmit_form_data_to_server
  end_if
}

<form>
    <input name="phone" type="tel"><!-- not sure this is a mandatory input, leaving the "required" attribute out of it, for tersity -->
    <select name="phone_type"><!-- not sure this is a mandatory input, leaving the "required" attribute out of it, for tersity -->
        <option value="other">Other</option>
    </select>
    <textarea name="desc"></textarea>
    <script>
        (function(form) {
            function update_desc_required() {
                form.elements.desc.required = (form.elements.phone_type.value == "other");
            }
            form.addEventListener("change", function(ev) {
                if(ev.target == form.elements.phone_type) {
                    update_desc_required();
                }
            });
            update_desc_required(); /// You can't assume any particular option is selected
        })(document.currentScript.parentElement);
    </script>
</form>