У меня есть одна простая форма, в которой есть два поля, называемые именем с идентификатором fname и полем электронной почты с адресом электронной почты. У меня есть кнопка отправки с идентификатором submit-btn. Я отключил кнопку отправки, используя javascript, подобный этому
document.getElementById("submit-btn").disabled = true;
Теперь я ищу разрешить отправку, если оба моих поля заполнены.
Мой полный javascript такой
<script type = "text/javascript">
document.getElementById("submit-btn").disabled = true;
document.getElementById("submit-btn").onclick = function(){
window.open("https://google.com",'_blank');
}
</script>
Я изучаю javascript и не знаю, как я могу это сделать. Дайте мне знать, если кто-то здесь может помочь мне в этом. Спасибо!
Я бы предложил что-то вроде этого
onclick
или onanything
input
s: ввод и изменение. input
будет реагировать на каждое нажатие клавиши, check
будет реагировать только на размытие элемента input
{
const btn = document.getElementById("submit-btn");
const fname = document.getElementById("fname");
const email = document.getElementById("email");
deactivate()
function activate() {
btn.disabled = false;
}
function deactivate() {
btn.disabled = true;
}
function check() {
if (fname.value != '' && email.value != '' && email.checkValidity()) {
activate()
} else {
deactivate()
}
}
btn.addEventListener('click', function(e) {
alert('submit')
})
fname.addEventListener('input', check)
email.addEventListener('input', check)
}
<form>
<input type = "text" name = "" id = "fname">
<input type = "email" name = "" id = "email">
<input type = "submit" id = "submit-btn" value = "Submit">
</form>
Это самое простое решение, которое я могу себе представить:
myForm.oninput = () => {
btn.disabled = fname.value == '' || email.value == '' || !email.checkValidity();
}
<form id = "myForm">
<input type = "text" name = "" id = "fname">
<input type = "email" name = "" id = "email">
<input type = "submit" id = "btn" value = "Submit" disabled>
</form>
Лично я предпочитаю использовать регулярное выражение для проверки электронной почты вместо checkValidity()
. Что-то вроде этого:
/^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/.test(email.value);