javascript - 如何验证不转到另一个页面但在同一页面上填写另一个表单的表单？

Question

我在一个页面上有两个表单，应该填写第二个表单并且需要验证才能填写大部分输入字段。如果字段未填写，则在单击保存按钮后应显示弹出窗口或警报，通知用户需要做什么。

单击保存按钮后，应将正确填写的文本字段复制/传输/移动到第一个表单。例如;在第二张表格中，如果我填写头衔、姓名和姓氏。这三个字段需要验证。单击保存按钮后，标题、姓名和姓氏字段中的值应在第一种形式的名称文本字段内连接。

Answer 1

我发现您的代码存在问题:

• 如果你想 var a = document.forms["forms"]["Title"].value; 那么必须在 id 上设置 "forms"值> 属性而不是 name 属性。
• document.getElementById('name').innerText = 不会更改名称输入的值，您必须改用 value 属性。<

更正了下面的代码片段

function openForm() {
    document.getElementById("container").style.display = "block";
}

document.getElementById("save-btn").onclick = function (e) {
    e.preventDefault();
    validateForm();
    moveContent();
}

function moveContent() {
    var x = document.getElementById('name').value =
        document.getElementById('TitleTransfer').value + ' ' +
        document.getElementById('NameTransfer').value + ' ' +
        document.getElementById('LastNameTransfer').value;
}

function validateForm() {
    var a = document.forms["forms"]["Title"].value;
    var b = document.forms["forms"]["NameTransfer"].value;
    var c = document.forms["forms"]["LastNameTransfer"].value;
    var d = document.forms["forms"]["EmailTransfer"].value;
    if (a == null || a == "", b == null || b == "", c == null || c == "", d == null || d == "") {
        alert("Please Fill All Required Field");
        return false;
    }
}

function openPage(pageName, elmnt, color) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].style.backgroundColor = "";
    }
    document.getElementById(pageName).style.display = "block";
    elmnt.style.backgroundColor = color;

}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

<h1>Your Name and Address</h1>
<form action="/">
    <div class="nameDiv">
        Name: <input type="textbox" name="firstname" title="name" id="name">

        <div class="dotOne"> ? </div>
        <span class="nameHelp"> Please enter first and last name   </span>

    </div>
    <br>
    <div class="addressDiv">
        Address: <input type="text" name="lastname" id="address">
        <div class="dotTwo">?</div>
    </div>
    <br>
    <div class="emailDiv">
        Email:
        <input type="text" name="Email" id="email">
        <span class="dotThree">?</span>
    </div>
    <br>
    <div class="numberDiv">
        Phone number:
        <input type="text" name="Phone number" id="number">
        <span class="dotFour">?</span>
    </div>
    <br>
</form>
<button class="btn" onclick="openForm()">Edit Details</button>

<div id="container">
    <button class="tablink" onclick="openPage('Name', this, 'grey')" id="defaultOpen">Name</button>
    <button class="tablink" onclick="openPage('Address', this, 'grey')">Address</button>

    <div id="Name" class="tabcontent">

        <form id="forms">
            <div class="nameDiv">
                Title: <input type="text" name="Title" title="Title" id="TitleTransfer">
            </div>
            <br>
            <div class="addressDiv">
                Name: <input type="text" name="name" id="NameTransfer">
            </div>
            <br>
            <div class="emailDiv">
                Surname:
                <input type="text" name="surname" id="LastNameTransfer">
            </div>
            <br>
            <div class="numberDiv">
                Email Address:
                <input type="text" name="email Address" id="EmailTransfer">
            </div>
            <br>
            <div class="numberDiv">
                Phone number:
                <input type="text" name="Phone number" id="NumberTransfer">
            </div>
            <button id="save-btn" onclick="validateForm()">Save</button>
        </form>
    </div>

    <div id="Address" class="tabcontent">
        <form>
            <div class="nameDiv">
                Line 1: <input type="text" name="firstname" value="Mickey" title="name" class="name">
            </div>
            <br>
            <div class="addressDiv">
                Line 2: <input type="text" name="lastname" value="Mouse" class="address">
            </div>
            <br>
            <div class="emailDiv">
                Suburb:
                <input type="text" name="Email" value="Email" class="email">
            </div>
            <br>
            <div class="numberDiv">
                State:
                <input type="text" name="Phone number" value="Phone number" class="number">
            </div>
            <br>
            <div class="numberDiv">
                Country:
                <input type="text" name="Phone number" value="Phone number" class="number">
            </div>
            <button class="save-btn" onclick="">Save</button>
        </form>
    </div>
</div>

正如作者所问，这是该问题的工作 fiddle 实现，作者在另一个 fiddle 中提供了 css，其中第二种形式在单击“保存”后消失了。

Working fiddle with the css