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

Question

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

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

Answer 1

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

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

更正下面的代码sn-p

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>

正如作者所问，这是该问题的一个可行的小提琴实现，作者在另一个小提琴中提供了 css，单击“保存”后第二个表单消失了。

Working fiddle with the css