Проблемы с валидацией формы

182
23 июля 2018, 14:40

Есть форма для заполнения данных. Есть её валидация. Проблема в том, что если я заполняю форму верно сразу же, т.е. как только открывается страница, то всё впорядке. НО! Если я сначала заполняю форму неверно и пытаюсь отправить её, мне показываются ошибки (всё по плану). А вот после того как я верно заполнил поля, мне всё равно выдаётся инфа о неверном заполнении, но из-за того что поле

validity.customError === true

В чем может быть проблема? Code:

var setNotice = function (checkResult) { 
  checkResult.forEach(function (arrElement) { 
    var field = arrElement.field; 
    var notice = arrElement.notice; 
    field.setCustomValidity(notice); 
  }); 
}; 
var getNotice = function (element) { 
  var validity = element.validity; 
  var notices = []; 
  if (validity.valueMissing === true) { 
    notices.push('This field is must being filled'); 
  } 
  if (validity.typeMismatch === true) { 
    notices.push('Input correct ' + element.type + '!'); 
  } 
  if (validity.tooShort === true) { 
    notices.push('Input value is too short. Minimum length is ' + element.minLength + ' characters!'); 
  } 
  if (validity.tooLong === true) { 
    notices.push('Input value is too long. Minimum length is ' + element.maxLength + ' characters!'); 
  } 
  // if (validity.stepMismatch === true) { } 
  if (validity.rangeUnderflow === true) { 
    notices.push('Input value is too small. Minimum value is ' + element.min + ' roubles!'); 
  } 
  if (validity.rangeOverflow === true) { 
    notices.push('Input value is too great. Maximum value is ' + element.max + ' roubles!'); 
  } 
  if (validity.patternMismatch === true) { 
    notices.push('Input value mismatch with pattern!'); 
  } 
  // if (validity.customError === true) { } 
  // if (validity.badInput === true) { } 
  return notices.join('; '); 
}; 
var checkValidity = function (elements) { 
  var checkResult = []; 
  for (var i = 0; i < elements.length; ++i) { 
    if (elements[i].validity.valid) { 
      continue; 
    } 
    checkResult.push({ 
      field: elements[i], 
      notice: getNotice(elements[i]) 
    }); 
  } 
  return checkResult; 
}; 
var isValid = function (checkResult) { 
  return (Object.keys(checkResult).length === 0) ? true : false; 
}; 
var onSendFormClicked = function (evt) { 
  var elementsInput = getFormInputs(); 
  var checkResult = checkValidity(elementsInput); 
  if (isValid(checkResult)) { 
    showSuccessSendInfo(); 
    evt.preventDefault(); 
    evt.stopPropagation(); 
  } else { 
    setNotice(checkResult); 
  } 
};

READ ALSO
React, Firefox 20, Illegal operation on WrappedNative prototype object

React, Firefox 20, Illegal operation on WrappedNative prototype object

У пользователей на старом FF 200, 22,0 возникает следующая ошибка, при рендере <input /> даже пустого,:

232
Не получается сложить JS

Не получается сложить JS

$("#bonus")text(sum + 20); так получается сложить, а так $("#bonus")

194
Почему в массив stream заносится undefined,

Почему в массив stream заносится undefined,

мне нужно, чтобы в массив stream записывался последний бит из массива arr, и потом этот же последний бит нужно удалить из arr

155
Как отправить обновленный response через fetch?

Как отправить обновленный response через fetch?

Как через fetch в существующий реквест добавить данные? Для примера: есть endpoint, у него в теле, в одном из свойств есть булево значение, которое...

181