Как сделать не колхозную валидацию?

Question

[cannabioid1337]

У меня есть валидация формы, но мне сказали что она колхозная. Как правильно ее оформить?

function check() {

	if (document.getElementsByName('fcard')[0].value.length >=16) {
		document.getElementsByName('fcard')[0].style.borderColor = '#009cde';
	}

	if (document.getElementsByName('fexpm')[0].value.length >=2) {
		document.getElementsByName('fexpm')[0].style.borderColor = '#009cde';
 }

		if (document.getElementsByName('fexpy')[0].value.length >=2) {
			document.getElementsByName('fexpy')[0].style.borderColor = '#009cde';
}

			if (document.getElementsByName('fcvc')[0].value.length >=3) {
				document.getElementsByName('fcvc')[0].style.borderColor = '#009cde';
}



	if (document.getElementsByName('fcard')[0].value.length <16) {
		document.getElementsByName('fcard')[0].style.borderColor = '#de0000';
		return false;
	}

	if (document.getElementsByName('fexpm')[0].value.length <2) {
		document.getElementsByName('fexpm')[0].style.borderColor = '#de0000';
		return false; }

		if (document.getElementsByName('fexpy')[0].value.length <2) {
			document.getElementsByName('fexpy')[0].style.borderColor = '#de0000';
			return false; }

			if (document.getElementsByName('fcvc')[0].value.length <3) {
				document.getElementsByName('fcvc')[0].style.borderColor = '#de0000';
				return false; }

	else {
		document.getElementById('anus-p').submit();
	}

} ;

Answer 1

[Alice]

const check = () => {
	const fcard = document.getElementsByName('fcard')[0];
	const fexpm = document.getElementsByName('fexpm')[0];
	const fexpy = document.getElementsByName('fexpy')[0];
	const fcvc = document.getElementsByName('fcvc')[0];
	const fcard = document.getElementsByName('fcard')[0];

    /**
     * @type {Array}
     */
	const colors = ['#009cde', '#de0000'];

	fcard.value.length >= 16
		? (fcard.style.borderColor = colors[0])
		: (fcard.style.borderColor = colors[1]);

	fexpm.value.length >= 2
		? (fexpm.style.borderColor = colors[0])
		: (fexpm.style.borderColor = colors[1]);

	fexpy.value.length >= 2
		? (fexpy.style.borderColor = colors[0])
		: (fexpy.style.borderColor = colors[1]);

	fcvc.value.length >= 3
		? (fcvc.style.borderColor = colors[0])
		: (fcvc.style.borderColor = colors[1]);

	/**
	 * И тут я не очень поняла, что за событие должно выполниться
	 */
	document.getElementById('anus-p').submit();
};

Answer 2

[Сергей Соколов]

function check() {

  const rules = { // имя: длина
    "fcard": 16,
    "fexpm": 2,
    "fexpy": 2,
    "fcvc": 3,
  };

  const colorOk = '#009cde';
  const colorFail = '#de0000';

  let allValid = true;

  for (let name in rules) {
    const el = document.querySelector(`input[name='${name}']`);
    const isValid = el.value.length >= rules[name];

    el.style.borderColor = isValid ? colorOk : colorFail;

    if (! isValid) {
      allValid = false;
    }
  }

  if (allValid) {
    document.getElementById('anus-p').submit();
  } else {
    return false;
  }
}

Answer 3

[G F]

Избавиться от повторяющегося кода, заменить обращение к style на css класс. Отправить чела который не может дать нормальный фидбек на переобучение.