javascript表单验证 - 没有弹出窗口

时间:2013-10-16 12:43:25

标签: javascript html validation

对于单一作业,我需要在发布之前验证我的表单。发生错误时,需要在与错误输入字段相同的块中显示文本消息(因此没有弹出消息)。我不擅长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);
  }
}

我希望有人能给我答案!感谢

1 个答案:

答案 0 :(得分:0)

那么,你想要的只是在文本字段附近显示一条错误消息?

为此,你需要修改一下你的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);

    }

    }