时间戳

首页 > 解决方案 > 空复选框上的 Javascript“空”验证消息

javascript - 空复选框上的 Javascript“空”验证消息

问题描述

我在表单验证中使用这个库https://github.com/asimism/native-validations，它工作正常，但是当我尝试提交空的复选框组时，复选框组验证中出现错误消息： “无效的”

这是演示链接：您必须单击“提交”而不单击任何字段才能看到“空”消息https://www.cssscript.com/demo/custom-html5-form-validator-native-validations/

https://codesandbox.io/s/8xr6vx5nnj?fontsize=14

显然，这个函数有错误

function checkBoxGroupValidate(event) {
       //get all checked checkboxes for a group and if its null then mark it invalid or valid
       var totalChecked = event.target.parentNode.querySelector("input[name$='[]']:checked");
       if (totalChecked === null) {
           var errorMessage = '';
           if(event.target.dataset.requireError){
               errorMessage = event.target.dataset.requireError;
           }else if(event.target.parentNode.dataset.requireError){
               errorMessage = event.target.parentNode.dataset.requireError;
           }else {
               errorMessage = OptionGroupMessage;
           }
           event.target.parentNode.classList.remove(SuccessClass);
           event.target.parentNode.classList.add(ErrorClass);
           if (event.target.parentNode.querySelector(HelpBlockSelector) === null) {
               event.target.parentNode.insertAdjacentHTML("afterbegin", MessageTag.replace("{0}", errorMessage));
           }
       } else {
           event.target.parentNode.classList.remove(ErrorClass);
           event.target.parentNode.classList.add(SuccessClass);
           var spanError = event.target.parentNode.querySelector(HelpBlockSelector);
           if (spanError !== null) {
               event.target.parentNode.removeChild(spanError)
           }
       }
   }

标签： javascriptformsvalidationcheckboxsubmit

解决方案

querySelector 返回 null 是因为在这种情况下是在子元素上搜索错误消息复选框，但它们第一次没有 data-require-error 属性来获取错误。

var errorMessage = groupParent.querySelector("input[name$='[]']").getAttribute('data-require-error');

而是直接使用父级

var errorMessage = groupParent.getAttribute("data-require-error");

推荐阅读