javascript表单验证-无弹出窗口

Question

对于单项作业，我需要在发布表单之前对其进行验证。 当发生错误时，在与错误输入字段相同的块中需要有一条文本消息（因此没有弹出消息）。 我不太擅长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>

到目前为止，我的Javascript（这将显示一个弹出消息）

function validate()
        {
 var userName = document.getElementById("txtName").value;
 if (userName.length == 0)
  {
    alert("Please, enter your name");
    return false;
  }
 else
  {
    alert("Thank you, " + userName);
  }
}

我希望有人能为我解答！ 谢谢

Answer 1

因此，您想要做的只是使一条错误消息出现在文本字段附近？

为此，您必须修改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>

并且，在您的js文件中，您将警报替换为您需要支付的ID：

 {

    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);

    }

    }