Как я могу применить тот же прослушиватель событий, который используется для всех элементов при отправке формы? - PullRequest
Новая
       31

Как я могу применить тот же прослушиватель событий, который используется для всех элементов при отправке формы?

0 голосов
/ 08 октября 2019

Вот мой JSfiddle: https://jsfiddle.net/apasric4/p61wjf8a/

Вот мой пример кода JS: 

function createListener(input) {
  return (e)=> {
    const el=e.target;
    const inputValue=e.target.value;
    const validator=inputCheck(input)
    const valid=validator(inputValue);
    borderHighlight(valid, el)
  }
}

inputs.forEach(input=> {
  input.addEventListener("input", createListener(input))
})


function borderHighlight(valid, el) {
  (valid)? el.style.border='2px solid green':el.style.border='2px solid red'
}

myForm.addEventListener('submit', (e)=> {
  e.preventDefault()
  inputs.forEach(input=> {
    createListener(input)
  })
})

Прослушиватель входных событий для каждого элемента идеально подходит для того, что он делает. Он дает живые сообщения об ошибках в качестве пользовательских вводимых данных. Но я хочу, чтобы эта функция делала то же самое, когда пользователь также отправляет форму (для события submit, прикрепленного к элементу формы)? Как я могу реализовать эту функциональность в моем коде?

Ответы [ 2 ]

1 голос
/ 08 октября 2019

Поместите код проверки в именованную функцию, чтобы ее можно было вызывать из обоих прослушивателей событий. 

function validate_input(el) {
    const inputValue=el.value;
    const validator=inputCheck(el)
    if (validator) {
        const valid= validator(inputValue);
        borderHighlight(valid, el);
    }
}

function createListener(input) {
    return e => validate_input(input);
}

inputs.forEach(input=> {
  input.addEventListener("input", createListener(input))
})


function borderHighlight(valid, el) {
  (valid)? el.style.border='2px solid green':el.style.border='2px solid red'
}

myform.addEventListener('submit', (e) => {
  e.preventDefault();
  inputs.forEach(input => validate_input(input));
});
0 голосов
/ 08 октября 2019

Измените форму отправки слушателя немного. Вызвать функцию, возвращенную из createListener, и передать поддельный объект события: {target: input}. 

myForm.addEventListener('submit', (e)=> {
  e.preventDefault()
  inputs.forEach(input=> {
    createListener(input)({target: input});
  })
});

Таким образом, вам не нужно ничего менять в createListener.

...