在javascript/html中显示错误消息而不使用警报

问题描述：

我试图在不使用警报框的情况下显示验证错误消息。但它不工作。以前我已经成功地使用了“innerHTML”。但我不明白为什么它不起作用。这是我的代码。在javascript/html中显示错误消息而不使用警报

function validate() 
 
{ 
 
    if(document.regform.fname.value.length=="") 
 
    { 
 
     document.getElementById("error").innerHTML="error"; 
 
    }  
 
}

<header> 
 
    <h1>SIGN UP</h1> 
 
</header> 
 
<div class="div1"><img src="img.jpg" width="250px"></div> 
 
<div class="div2" id="div2"> 
 
    <form name="regform" onsubmit="return validate()"> 
 
    <label><input type="text" name="fName" id="fna"></label> 
 
    <input type="submit" name="submit" value="Sign Up" > 
 
    <p id="error"></p> 
 
    </form> 
 
</div> 
 

 
<footer></footer>

让我猜，你的表单只是闪烁，然后重新加载？ – j08691

[javascript如何在不使用警报的情况下创建验证错误消息]的可能重复（https://stackoverflow.com/questions/13689832/javascript-how-to-create-a-validation-error-message-without-using-警报） – Nisarg

答

有在你的代码的一些错误。首先名称是fName，但您使用的是fname，然后您必须用整数值非空字符串比较length。

如果发生错误，您还想停止提交。因此，如果出现错误，则返回false。试试这个。

function validate() { 
 
    if (document.regform.fName.value.length == '0') { 
 
    document.getElementById("error").innerHTML = "error"; 
 
    return false; 
 
    } 
 
}

<body> 
 
    <header> 
 
    <h1>SIGN UP</h1> 
 
    </header> 
 
    <div class="div2" id="div2"> 
 
    <form name="regform" onsubmit="return validate()"> 
 

 
     <label><input type="text" name="fName" id="fna"></label> 
 
     <input type="submit" name="submit" value="Sign Up"> 
 
     <p id="error"></p> 
 
    </form> 
 
    </div> 
 
    <footer></footer> 
 
</body>

希望工程。

缩进你的答案，并做一个片段 – Durga

@Anup它的工作。似乎我必须在编码时更加小心。谢谢 –

在javascript/html中显示错误消息而不使用警报

相关推荐