沒有提醒的表單驗證

Question

我想知道是否有方法在不使用提醒的情況下驗證表單。像通常情況下，如果您輸入了錯誤的信息或其他內容，您會在輸入框旁邊看到紅色文本。我不想使用Jquery。我已經在html - namemsg，commentmsg，emailmsg中包含了紅色文本消息的div。

到目前爲止，我只有警報的代碼。 的JavaScript：

function validateUser() 
{ 
    var x=document.forms["myForm"]["email"].value; 
    var atpos=x.indexOf("@"); 
    var dotpos=x.lastIndexOf("."); 
    if (atpos<2 || dotpos<atpos+2 || dotpos+2>=x.length) 
    { 
     alert("Not a valid e-mail address"); 
     return false; 
    } 

    { 
     alert("Valid Input"); 
    } 

    return true; 
} 

的Html

<form name="myForm" method="post"> 
    <label>*Name:</label> 
    <input type="text" name="name" title="Enter a your name" placeholder="Your Name" onclick="select()" required/> 
    <div id="namemsg"></div><br/> 

    <label>*E-mail:</label> 
    <input type="text" name="email" title="Enter a valid email address" placeholder="me@example.com" onclick="select()" required/> 
    <div id="emailmsg"> </div><br/> 

    <label>*Comment:</label> 
    <textarea name="comment" title="Enter your comments" placeholder="Enter your comments." onclick="select()" required/></textarea> 
    <div id="commentmsg"> </div> 
    <label id="error"> </label> <br/> 
    <input type="submit" value="Submit" onclick="return validateUser()"> 
</form> 

Answer 1

你可以把一個跨度/標籤旁邊的預定義的文字，樣式和none顯示風格驗證的字段。如果驗證檢測到無效輸入 - 將顯示樣式更改爲「」以使標籤可見。

更新

我看你已經預先定義DIV。把它定義爲

<div id="emailmsg" style="color:Red;display:none">Not a valid e-mail address</div> 

而在JavaScript中，而不是

alert("Not a valid e-mail address"); 

使用

document.getElementById("emailmsg").style.display="" 

Answer 2

您的HTML：

<form name="myForm" method="post"> 
     <label>*Name:</label> 
     <input type="text" name="name" title="Enter a your name" placeholder="Your Name" onclick="select()" required/> 
     <div id="namemsg"></div><br/> 

     <label>*E-mail:</label> 
     <input type="text" name="email" title="Enter a valid email address" placeholder="me@example.com" onclick="select()" required/> 
// this span is hidden until you show it as error msg 
    <span id="error" style='display: none'>Not a valid e-mail address<span> 
     <div id="emailmsg"> </div><br/> 

     <label>*Comment:</label> 
     <textarea name="comment" title="Enter your comments" placeholder="Enter your comments." onclick="select()" required/></textarea> 
     <div id="commentmsg"> </div> 
     <label id="error"> </label> <br/> 
     <input type="submit" value="Submit" onclick="return validateUser()"> 
    </form> 

您的JS：

function validateUser() 
    {{ 
    var x=document.forms["myForm"]["email"].value; 
    var atpos=x.indexOf("@"); 
    var dotpos=x.lastIndexOf("."); 
    if (atpos<2 || dotpos<atpos+2 || dotpos+2>=x.length) 
    { 
//instead of alerting error show your error span try to put nice css for it 
    document.getElementById('error').style.display="block"; 
    return false; 
    } 

    {alert("Valid Input");} 
    return true; 
     } 

Answer 3

首先，我建議將該函數的執行附加到事件OnSubmit。

HTML：

<form method="post" name="myForm" onsubmit="return validateUser(this);">

JS：

function validateUser(formObj) {}

接下來，你需要做的唯一事情，只是有某種容器中，如果該函數檢測到錯誤，只需將錯誤文本附加到它。

在每個函數調用開始時，清空容器。

如果您希望錯誤出現在文本框/任何輸入標籤的旁邊，只需在每個字段旁邊添加一個div/span並將錯誤附加到它。

document.getElementById("emailmsg").innerHTML = "Not cool...";

Answer 4

而不是顯示警告消息框，你可以顏色文本框邊框，紅色，顯示它下面的錯誤。就像，如果更換下面的代碼行：

alert("Not a valid e-mail address"); 

有了：

document.forms["myForm"]["email"].style.border = "1px solid red"; 
document.getElementById("emailmsg").innerHTML = "Not a valid e-mail address"; 

上面的代碼將突出電子郵件字段的邊框爲紅色，並顯示錯誤emailmsg股利。

希望這可以幫助。

Answer 5

這應該有所幫助。

if (atpos<2 || dotpos<atpos+2 || dotpos+2>=x.length){ 
// validate message function call 
valMessage('emailmsg', 'Not a valid e-mail address'); 
return false; 
} 

// validate message function 
function valMessage(divName, content) { 
    document.getElementById(divName).innerHTML = content; 
}