使用HTML5时所需的属性不起作用

Question

我发现了类似的问题，但似乎没有一个能回答我的问题。我有一张表格，里面有一些我想被要求的细节。有些我没有。我有一个必需的标记。提交按钮在表单之外，但使用表单属性链接到它。当按下提交按钮时，我希望它用一个新对象更新一个数组。但是，即使所需字段(名字和姓氏(为空，它也会更新。如果名字和姓氏输入字段中有值，如何确保表单只更新数组？

HTML:

<div class="form-overlay" id="newPersonFormCtr">
<div class="form-content">
<div class="mainbox-title">Personal details</div>
<form name="newPersonForm" method="post" action=""> 
<div class="form-group">
<label>First name</label><br>
<input type="text" id="first-name" name="firstname" class="form-control" value="" required />
</div>
<div class="form-group">
<label>Surname</label><br>
<input type="text" id="surname" name="surname" class="form-control" value="" required />
</div>
<div class="form-group">
<label>Favorite food</label><br>
<input type="text" id="fav-food" name="fav-food" class="form-control" value="" />
</div>
</form>
</div>
<button class="addBtn" form="newPersonForm" id="addPersonBtn" type="submit" onclick="addPerson()">Add Person</button>
</div>

JS-

let people = [
{
firstName : 'John',
surname : 'Adams',
}]  
function addPerson(){
var newPerson = 
{  
'firstName' : document.newPersonForm.firstname.value, 
'surname' : document.newPersonForm.surname.value 
}
people.push(newPerson);
console.log(people);
}   

Answer 1

所需属性在不同的浏览器中以不同的方式工作。您应该使用JavaScript验证而不是HTML。在推送到数组之前，请检查该值并确保它们不是空的。希望这会有所帮助。

let people = [
{
firstName : 'John',
surname : 'Adams',
}]  
function addPerson(){
let firstName = document.newPersonForm.firstname.value,
surename = document.newPersonForm.surname.value;
if(firstName === '' || surename === '') return false;
// more validation here

var newPerson = 
{  
'firstName' : firstName, 
'surname' : surename 
}
people.push(newPerson);
console.log(people);
}   

Answer 2

我想你可以在javascript文件中完成。。。

const firstName = document.getElementById('first-name')
const surname = document.getElementById('surname')
let people = [
{
firstName : 'John',
surname : 'Adams',
}]  
function addPerson(){
if(firstName.value !== "" && surname.value !== "") {
var newPerson = 
{  
'firstName' : document.newPersonForm.firstname.value, 
'surname' : document.newPersonForm.surname.value 
}
people.push(newPerson);
console.log(people);
}
} 

Answer 3

function isEmpty(str) {
return (!str || 0 === str.length || str.trim().length === 0);
}
function addPerson(){
if(!isEmpty(document.newPersonForm.firstname.value) && 
!isEmpty(document.newPersonForm.surname.value)){
var newPerson = 
{  
'firstName' : document.newPersonForm.firstname.value, 
'surname' : document.newPersonForm.surname.value 
}
people.push(newPerson);
console.log(people);
}
else alert("Inputs are required");
}   

Answer 4

您可以使用onsubmit事件侦听器而不是onclick事件

像这样：

<button class="addBtn" form="newPersonForm" id="addPersonBtn" type="submit" onsubmit="addPerson()">Add Person</button>

但不是这个：

<button class="addBtn" form="newPersonForm" id="addPersonBtn" type="submit" onclick="addPerson()">Add Person</button>

然后将id属性添加到像这样的表单元素中

<form id="newPersonForm" name="newPersonForm" method="post" action="">
// code here ....
<form/>