完成必填字段后如何允许提交表单?
How to allow form to be submitted once required fields are completed?
我已经完成了立即验证字段的代码,但还想在字段没有值时阻止提交表单。我设法阻止了表单的提交,但是当我返回并提供一个值时,它仍然不允许提交。知道我在这里做错了什么吗?
这是HTML:
<form id="contactForm" action="https://formspree.io/xrggbejj" method="POST" onsubmit="return formValidation(contactForm);">
<div class="row">
<div class="col">
<label for="fName">First Name</label>
</div>
<div class="col">
<input type="text" id="fName" name="firstname" onblur="checkFirstName(firstName)" autofocus/>
<img src="../images/alert-icon.png" class="alert" id="firstNameMsg" alt="alert icon" width="40" height="35"/>
</div>
</div> <!-- End of row -->
<div class="row">
<div class="col">
<label for="lName">Last Name</label>
</div>
<div class="col">
<input type="text" id="lName" name="lastname" onblur="checkLastName(lastName)"/>
<img src="../images/alert-icon.png" class="alert" id="lastNameMsg" alt="alert icon" width="40" height="35"/>
</div>
</div> <!-- End of row -->
<div class="row">
<div class="col">
<label for="subject">Questions and/or Comments</label>
</div>
<div class="col">
<textarea id="subject" name="subject" onblur="checkSubject(subject)" style="height:200px"></textarea>
<img src="../images/alert-icon.png" class="alert" id="subjectMsg" alt="alert icon" width="40" height="35"/>
</div>
</div> <!-- End of row -->
<div class="row">
<input type="submit" value="SEND" />
</div> <!-- End of row -->
</form>
这里是 JavaScript:
联系表单字段验证
var alertStyle;
var alertImg;
const firstName = document.forms['contactForm']['fName'];
const lastName = document.forms['contactForm']['lName'];
const subject = document.forms['contactForm']['subject'];
function checkFirstName(firstName) {
if (firstName.value === '') {
alertStyle = document.getElementById('fName').style.border = '2px solid rgba(255, 6, 0)';
alertImg = document.getElementById('firstNameMsg').style.display = 'inline-block';
return false;
} else if (firstName.value !== '') {
alertStyle = document.getElementById('fName').style.border = '1px solid #ccc';
alertImg = document.getElementById('firstNameMsg').style.display = 'none';
return true;
}
}
function checkLastName(lastName) {
if (lastName.value === '') {
alertStyle = document.getElementById('lName').style.border = '2px solid rgba(255, 6, 0)';
alertImg = document.getElementById('lastNameMsg').style.display = 'inline-block';
return false;
} else if (lastName.value !== '') {
alertStyle = document.getElementById('lName').style.border = '1px solid #ccc';
alertImg = document.getElementById('lastNameMsg').style.display = 'none';
return true;
}
}
function checkSubject(subject) {
if (subject.value === '') {
alertStyle = document.getElementById('subject').style.border = '2px solid rgba(255, 6, 0)';
alertImg = document.getElementById('subjectMsg').style.display = 'inline-block';
return false;
} else if (firstName.value !== '') {
alertStyle = document.getElementById('subject').style.border = '1px solid #ccc';
alertImg = document.getElementById('subjectMsg').style.display = 'none';
return true;
}}
提交时联系表单验证
function formValidation(contactForm) {
if (firstName && lastName && subject !== true) {
alert('Please fill out required fields.')
event.preventDefault()
return false;
} else if (firstName && lastName && subject === true) {
return true;
}
}
既然你这样做了
if (firstName && lastName && subject !== true) {
...
}
我假设你希望这样做
if (firstName.value === '') {
alertStyle = document.getElementById('fName').style.border = '2px solid rgba(255, 6, 0)';
alertImg = document.getElementById('firstNameMsg').style.display = 'inline-block';
return false;
会做这样的事情
firstName = true
但它实际上并没有给firstName
分配任何东西。它只是 returns 正确。
你可以有一个像 isValid
这样的变量并执行 isValid = true
而不是在你的 checkLastName() etc..
中返回 true
但是,既然你这样做了
document.getElementById('lastNameMsg').style.display = 'none'
你可以做到
function formValidation(contactForm) {
if (document.getElementById('lastNameMsg').style.display !== 'none') {
alert('Please fill out required fields.')
event.preventDefault()
return false;
} else if (document.getElementById('lastNameMsg').style.display === 'none') {
return true;
}
}
无论如何,有多种方法可以简化这个过程,但希望这能让你继续:)
干杯。
firstName
、lastName
和 subject
变量指向输入而不是其中的实际值。您可以将函数修改为
function formValidation(contactForm) {
if (!firstName.value || !lastName.value || !subject.value) {
alert('Please fill out required fields.')
event.preventDefault()
return false;
} else {
return true;
}
}
这里我使用 !
运算符将输入转换为 True
当它们为空时,如果任何输入为空,第一个 case 将计算,否则你的函数将 return 正确。
我已经完成了立即验证字段的代码,但还想在字段没有值时阻止提交表单。我设法阻止了表单的提交,但是当我返回并提供一个值时,它仍然不允许提交。知道我在这里做错了什么吗?
这是HTML:
<form id="contactForm" action="https://formspree.io/xrggbejj" method="POST" onsubmit="return formValidation(contactForm);">
<div class="row">
<div class="col">
<label for="fName">First Name</label>
</div>
<div class="col">
<input type="text" id="fName" name="firstname" onblur="checkFirstName(firstName)" autofocus/>
<img src="../images/alert-icon.png" class="alert" id="firstNameMsg" alt="alert icon" width="40" height="35"/>
</div>
</div> <!-- End of row -->
<div class="row">
<div class="col">
<label for="lName">Last Name</label>
</div>
<div class="col">
<input type="text" id="lName" name="lastname" onblur="checkLastName(lastName)"/>
<img src="../images/alert-icon.png" class="alert" id="lastNameMsg" alt="alert icon" width="40" height="35"/>
</div>
</div> <!-- End of row -->
<div class="row">
<div class="col">
<label for="subject">Questions and/or Comments</label>
</div>
<div class="col">
<textarea id="subject" name="subject" onblur="checkSubject(subject)" style="height:200px"></textarea>
<img src="../images/alert-icon.png" class="alert" id="subjectMsg" alt="alert icon" width="40" height="35"/>
</div>
</div> <!-- End of row -->
<div class="row">
<input type="submit" value="SEND" />
</div> <!-- End of row -->
</form>
这里是 JavaScript:
联系表单字段验证
var alertStyle;
var alertImg;
const firstName = document.forms['contactForm']['fName'];
const lastName = document.forms['contactForm']['lName'];
const subject = document.forms['contactForm']['subject'];
function checkFirstName(firstName) {
if (firstName.value === '') {
alertStyle = document.getElementById('fName').style.border = '2px solid rgba(255, 6, 0)';
alertImg = document.getElementById('firstNameMsg').style.display = 'inline-block';
return false;
} else if (firstName.value !== '') {
alertStyle = document.getElementById('fName').style.border = '1px solid #ccc';
alertImg = document.getElementById('firstNameMsg').style.display = 'none';
return true;
}
}
function checkLastName(lastName) {
if (lastName.value === '') {
alertStyle = document.getElementById('lName').style.border = '2px solid rgba(255, 6, 0)';
alertImg = document.getElementById('lastNameMsg').style.display = 'inline-block';
return false;
} else if (lastName.value !== '') {
alertStyle = document.getElementById('lName').style.border = '1px solid #ccc';
alertImg = document.getElementById('lastNameMsg').style.display = 'none';
return true;
}
}
function checkSubject(subject) {
if (subject.value === '') {
alertStyle = document.getElementById('subject').style.border = '2px solid rgba(255, 6, 0)';
alertImg = document.getElementById('subjectMsg').style.display = 'inline-block';
return false;
} else if (firstName.value !== '') {
alertStyle = document.getElementById('subject').style.border = '1px solid #ccc';
alertImg = document.getElementById('subjectMsg').style.display = 'none';
return true;
}}
提交时联系表单验证
function formValidation(contactForm) {
if (firstName && lastName && subject !== true) {
alert('Please fill out required fields.')
event.preventDefault()
return false;
} else if (firstName && lastName && subject === true) {
return true;
}
}
既然你这样做了
if (firstName && lastName && subject !== true) {
...
}
我假设你希望这样做
if (firstName.value === '') {
alertStyle = document.getElementById('fName').style.border = '2px solid rgba(255, 6, 0)';
alertImg = document.getElementById('firstNameMsg').style.display = 'inline-block';
return false;
会做这样的事情
firstName = true
但它实际上并没有给firstName
分配任何东西。它只是 returns 正确。
你可以有一个像 isValid
这样的变量并执行 isValid = true
而不是在你的 checkLastName() etc..
但是,既然你这样做了
document.getElementById('lastNameMsg').style.display = 'none'
你可以做到
function formValidation(contactForm) {
if (document.getElementById('lastNameMsg').style.display !== 'none') {
alert('Please fill out required fields.')
event.preventDefault()
return false;
} else if (document.getElementById('lastNameMsg').style.display === 'none') {
return true;
}
}
无论如何,有多种方法可以简化这个过程,但希望这能让你继续:)
干杯。
firstName
、lastName
和 subject
变量指向输入而不是其中的实际值。您可以将函数修改为
function formValidation(contactForm) {
if (!firstName.value || !lastName.value || !subject.value) {
alert('Please fill out required fields.')
event.preventDefault()
return false;
} else {
return true;
}
}
这里我使用 !
运算符将输入转换为 True
当它们为空时,如果任何输入为空,第一个 case 将计算,否则你的函数将 return 正确。