表单验证电话号码输入

Question

我想验证电话号码输入字段，但由于某种原因，当我单击提交时它没有验证。我已经为此构建了一个功能，但仍然无法正常工作。在代码下方。 任何帮助都会非常有帮助。提前致谢

联系表格

<script>
function phonenumberValidation()
{
var a = document.getElementById("phone").value;
if(a=="") {
document.getElementById("messages").innerHTML="verdomd";
return false;
}
}
</script>
<div class="contact">
<h3>Mail ons</h3>
<p class="text-center text-danger"><%= message %></p>
<form method="POST" action="send">
<p>
<label>Naam</label>
<input type="text" name="name" required>
</p>
<p>
<label>Organisatie</label>
<input type="text" name="company">
</p>
<p>
<label>Email</label>
<input type="email" name="email" required >
</p>
<p>
<label>Telefoonnummer</label>
<input type="text" name="phone" id="phone" value="">
<span id="message"></span>
</p>
<p class="full">
<label>Bericht</label>
<textarea name="messages" rows="5" required></textarea>
</p>
<p class="full">
<button type="submit">Versturen</button>
</p>
</form>
</div>
</div>

Answer 1

您需要为函数添加事件侦听器。你也错过了id="messages"以及a===""不是a=="".

下面是对现场电话更改做出反应的代码示例：

document.getElementById("phone").addEventListener("change", phonenumberValidation);
function phonenumberValidation()
{
var a = document.getElementById("phone").value;
console.log(a);
if(a==="") {
document.getElementById("messages").innerHTML="verdomd";
return false;
}
}

<div class="contact">
<h3>Mail ons</h3>
<p class="text-center text-danger"><%= message %></p>
<form method="POST" action="send">
<p>
<label>Naam</label>
<input type="text" name="name" required>
</p>
<p>
<label>Organisatie</label>
<input type="text" name="company">
</p>
<p>
<label>Email</label>
<input type="email" name="email" required >
</p>
<p>
<label>Telefoonnummer</label>
<input type="text" name="phone" id="phone" value="">
<span id="message"></span>
</p>
<p class="full">
<label>Bericht</label>
<textarea name="messages" id="messages" rows="5" required></textarea>
</p>
<p class="full">
<button type="submit">Versturen</button>
</p>
</form>

以及点击提交时弯腰的表单示例：

document.getElementById("submit-btn").addEventListener("click", function(event){
var a = document.getElementById("phone").value;
console.log(a);
if(a==="") {
event.preventDefault();
document.getElementById("messages").value +="verdomd";
return false;
}
});

<div class="contact">
<h3>Mail ons</h3>
<p class="text-center text-danger"><%= message %></p>
<form method="POST" action="send">
<p>
<label>Naam</label>
<input type="text" name="name" required>
</p>
<p>
<label>Organisatie</label>
<input type="text" name="company">
</p>
<p>
<label>Email</label>
<input type="email" name="email" required >
</p>
<p>
<label>Telefoonnummer</label>
<input type="text" name="phone" id="phone" value="">
<span id="message"></span>
</p>
<p class="full">
<label>Bericht</label>
<textarea name="messages" id="messages" rows="5" required></textarea>
</p>
<p class="full">
<button id="submit-btn">Versturen</button>
</p>
</form>