javascript表单验证-无弹出窗口

对于uni作业，我需要在发布前验证我的表格。发生错误时，需要在与错误输入字段相同的块中显示文本消息（因此没有弹出消息）。我不太擅长JavaScript，所以我真的需要一些帮助

这是我的html

<div id="form">
    <form name="myForm" method="post"  >
    <p class="head">Deelnemer</p>
        <fieldset id="deelnemer">
            <label class="title">Naam:</label>
                <input type="text" id="txtName" name="txtName" size="15"/>                
        </fieldset>
    <p class="head">Opmerkingen</p>
        <fieldset id="opmerkingen">
            <textarea name="opmerkingen" rows="5" cols="40"></textarea>
        </fieldset>
    <p id="button"> 
        <input type="submit" name="submit" value="Aanmelden" onclick="validate()"/>
    </p>
</form>

---

我希望有人能给我一个答案！谢谢

那么，您要做的就是在文本字段附近显示一条带有错误的消息

为此，您需要稍微修改htm和js：

<p class="head">Deelnemer</p>

    <fieldset id="deelnemer">

        <label class="title">Naam:</label>
            <input type="text" id="txtName" name="txtName" size="15"/>
            <div id="txtNameError" style="display: none;">Please, enter your name</div>
<p class="head">Opmerkingen</p>
    <fieldset id="opmerkingen">
        <textarea name="opmerkingen" rows="5" cols="40">

        </textarea>
    </fieldset>

<p id="button"> 
    <input type="submit" name="submit" value="Aanmelden" onclick="validate()"/>
    </p>
</form>

---

我不能让它工作。我将整个表单放在一个div中。如果我使用您的代码，当我单击submit时，它将不会显示在消息中。我认为是因为display none，但是当我使用与display不同的东西：none时，它会弄乱整个表单，并在我加载页面时显示div。这是因为无论js中发生什么，你的按钮都会提交表单。您需要使用：更改它，并且在js中的else条件下，您必须添加document.getElementById（“myForm”）.submit（）；

<p class="head">Deelnemer</p>

    <fieldset id="deelnemer">

        <label class="title">Naam:</label>
            <input type="text" id="txtName" name="txtName" size="15"/>
            <div id="txtNameError" style="display: none;">Please, enter your name</div>
<p class="head">Opmerkingen</p>
    <fieldset id="opmerkingen">
        <textarea name="opmerkingen" rows="5" cols="40">

        </textarea>
    </fieldset>

<p id="button"> 
    <input type="submit" name="submit" value="Aanmelden" onclick="validate()"/>
    </p>
</form>

 {

    var userName = document.getElementById("txtName").value;


    if (userName.length == 0)

    {

    /*alert("Please, enter your name");*/
    document.getElementById("txtNameError").style.display = "block";

    return false;

    }

    else

    {

    alert("Thank you, " + userName);

    }

    }