Как реализовать валидацию поля input URL?

Question

Мне нужно что когда пользователь вводит ссылку в поле при нажатие на кнопку поле проверялось на валидность и если проверка прошла успешно то переходило по этой ссылки, в противном случае если в ссылки отсутствует http//: то оно добавлялось в ссылку. В input может поступать ссылка с http//: или без. Но при нажатие кнопки происходит переход по ссылки именно с http//:

const input = document.getElementById('input');
const btn = document.getElementById('btn');
const form = document.getElementById('form');
const urlPattern = new RegExp(/^https?:\/\/([a-z0-9-]([a-z0-9-]|(?<!\.)\.)+?(?<!\.)\.[a-z]{2,10}(:\d{1,5})?$)|(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}(:\d{1,5})?$)/);
form.addEventListener('submit', function (event) {
if (!urlPattern.test(input.value)) {
    input.value.unshift('https://');
} else {
    btn.addEventListener('click', function (event) {
        window.location.href = input.value;
    })
}
})

<form id="form">
        <label for="input"></label>
        <input id="input" type="text" placeholder="Введите ссылку">
        <button id="btn" type="button">Жмякни на меня !</button>
</form>

Answer 1

Исходя из комментариев:

Вот так будет переходить. В вашем варианте, вы при успешной проверке каждый раз добавляли кнопке новый слушатель

    const input = document.getElementById('input');
    const btn = document.getElementById('btn');
    const err = document.getElementById('err')
    const urlPattern = new RegExp(/^(?:(?:https?|ftp|telnet):\/\/(?:[a-z0-9_-]{1,32}(?::[a-z0-9_-]{1,32})?@)?)?(?:(?:[a-z0-9-]{1,128}\.)+(?:com|net|org|mil|edu|arpa|ru|gov|biz|info|aero|inc|name|[a-z]{2})|(?!0)(?:(?!0[^.]|255)[0-9]{1,3}\.){3}(?!0|255)[0-9]{1,3})(?:\/[a-z0-9.,_@%&?+=\~\/-]*)?(?:#[^ \'\"&<>]*)?$/i);

    btn.addEventListener('click', function (event) {
        if (!urlPattern.test(input.value)) {
            err.innerText = 'Неверный адрес страницы'
        } else {
            if (input.value.substring(0, 4) === 'http') {
                window.location.href = input.value;
            } else {
                window.location.href = 'http://' + input.value;
            }
        }

    })

<label for="input"></label>
<input id="input" type="text" placeholder="Введите ссылку">
<button id="btn" type="button">Жмякни на меня !</button>
<br />
<div id="err" style="color: red"></div>

БЛОГ НА HUSL

Как реализовать валидацию поля input URL?

Ответы (1 шт):