使用 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文件中做到這一點......

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 2

required 屬性在不同的瀏覽器中以不同的方式工作。 您應該使用 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 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/>