Javascript «пустое» сообщение проверки на пустых флажках - PullRequest
Новая
       46

Javascript «пустое» сообщение проверки на пустых флажках

0 голосов
/ 14 марта 2019

Я использую эту библиотеку https://github.com/asimism/native-validations в проверке формы, она работает нормально, но у меня появляется сообщение об ошибке в проверке группы флажков, когда я пытаюсь отправить группу пустых флажков, появляется: "null"

это демонстрационная ссылка: вы должны нажать «отправить», не щелкая ни одно поле, чтобы увидеть «нулевое» сообщение 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)
           }
       }
   }

1 Ответ

0 голосов
/ 14 марта 2019

querySelector возвращает значение NULL, поскольку ищет сообщение об ошибке в дочерних элементах в этом случае, но у них нет атрибута data-require-error при первом получении ошибки.

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

вместо непосредственного использования родителя 

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