Javascript 需要帮助制作所有必填字段并在页面右侧打印答案吗

我需要使所有字段都是必需的，并将结果打印在页面的右侧，但不确定该怎么办

我什么都试过了，都想不出来。这是我的表单布局代码，当我在代码中输入required时，它不起作用，现在什么也不会弹出，即使我以前让它工作过一次

HTML:

JavaScript:

function validateForm(){
    var isValid = false;
    // Validate the form according to validation requirements
    var name = document.registration.name.value;
    var username = document.registration.username.value;
    var email = document.registration.email.value;
    var password = document.registration.password.value;
    var password = document.registration.password.value;
    var password2 = document.registration.password2.value;
    var age = document.registration.age.value;
    var bio = document.registration.bio.value;
    var gender = document.registration.gender.value;
    var agreement = document.registration.agreement.value;



    if(isValid){
        //Print the form input values into output div. Append each text/value as a list item of the ul#result_list using jQuery
    }
    return false;
}

---

我想我至少可以帮你解决一半的问题。您可以通过在关闭标记之前将其添加为关键字来进行所需的HTML输入。见下文

        <div class="row">
            <label for="username">Username</label>
            <input id="username" name="username" type="text" required/>                
        </div>

此外，由于您在一个名为validateForm的函数中执行所有这些JavaScript，因此您需要确保在通过脚本标记将JavaScript文件导入HTML后在HTML中调用该函数。请注意下面的onclick方法

            <div class="row">
                <input onclick="return validateForm()" id="submit-btn" name="submit-btn" type="submit" onclick="return validateForm()" value="Submit" />
            </div>

您尝试过什么？错误在哪里？我实际上使用javascript修复了该部分，因为出于某种原因，required无法工作，谢谢您的帮助好的！我刚刚更新了我的评论，添加了一些代码，这些代码可以帮助将内容打印到结果无序列表中，对您的代码进行有限的编辑。尝试了之后，它什么都没做，只需将所有字段保留为空白。您是否有其他代码处理我们看不到的验证要求？我把这些都评论掉了，因为我不知道他们在干什么。另外，您是否确保在按钮的onclick事件中返回函数调用？它需要返回false以保留填写的表单。上面的所有代码都是我拥有的，当我输入您的代码时，它什么也没有做

        <div class="row">
            <label for="username">Username</label>
            <input id="username" name="username" type="text" required/>                
        </div>

function validateForm(){
    console.log("hello");
    var isValid = false;

    // Validate the form according to validation requirements
    // var name = document.registration.name.value;
    // var username = document.registration.username.value;
    // var email = document.registration.email.value;
    // var password = document.registration.password.value;
    // var password = document.registration.password.value;
    // var password2 = document.registration.password2.value;
    // var age = document.registration.age.value;
    // var bio = document.registration.bio.value;
    // var gender = document.registration.gender.value;
    // var agreement = document.registration.agreement.value;

    if(isValid){
        //Print the form input values into output div. Append each text/value as a list item of the ul#result_list using jQuery
    }

    // Fetch our input data.
    let name = document.getElementById('name').value;
    console.log(name);

    // Create a new list item to insert that data into.
    let newLi = document.createElement('li');
    console.log(newLi);

    // Convert out fetched data into a text node.
    let newContent = document.createTextNode(name);
    console.log(newContent);

    // Add text node to our newly created list item.
    newLi.appendChild(newContent);
    console.log(newLi);

    // // Add newly created element and its content into the DOM.
    let currentUl = document.getElementById('result_list');
    console.log(currentUl);

    currentUl.appendChild(newLi);

    return false;
}

            <div class="row">
                <input onclick="return validateForm()" id="submit-btn" name="submit-btn" type="submit" onclick="return validateForm()" value="Submit" />
            </div>