Javascript驗證表單沒有提醒（）

我試圖建立一個HTML表單，它將驗證用戶是否在每個輸入框中輸入了所有的值。到目前爲止，我在谷歌的例子中發現，當用戶離開輸入框爲空時，它會調用alert（），這對用戶來說很煩人，如果他們必須填滿大約10個盒子，然後偶然點擊提交，現在他們必須關閉10條警報。我在考慮是否可以在空盒子旁邊顯示一個紅色的信息，指出哪些盒子是空的。這裏是我的代碼顯示警報：Javascript驗證表單沒有提醒（）

<form name="ExamEntry" method="POST"> 
    <input type="text" id="name" name="name" /> 
    <input type="text" id="subject" name="subject" /> 
    <input type="text" id="examnumber" name="examNumber" /> 
    <input type="submit" name="submit" value="Submit" onlick="return validateForm()" /> 
</form>

的javascript：

function validateForm(){ 
    var result = true; 
    var msg = ""; 

    if(document.ExamEntry.name.value==""){ 
     msg+="You must enter your Name \n"; 
     document.ExamEntry.name.focus(); 
     document.getElementById('name').style.color="red"; 
     result = false; 
    } 

    if(document.ExamEntry.subject.value==""){ 
     msg+="You must enter the Subject \n"; 
     document.ExamEntry.subject.focus(); 
     document.getElementById('subject').style.color="red"; 
     result = false; 
    } 

    if(document.ExamEntry.examNumber.value=="") 
    { 
     msg+="You must enter the Examination Number \n"; 
     document.ExamEntry.examNumber.focus; 
     document.getElementById('examnumber').style.color="red"; 
     result = false; 
    } 

    if(document.ExamEntry.examNumber.value.length!=4) 
    { 
     msg+="Your Examination Number must be 4 characters long \n"; 
     document.ExamEntry.examNumber.focus; 
     document.getElementById('examnumber').style.color="red"; 
     result = false; 
    } 

    var lvlmsg=""; 
    for(var i=0; i < document.ExamEntry.level.length; i++) 
     { 
      if(document.ExamEntry.level[i].checked) 
      { 
       lvlmsg = document.ExamEntry.level[i].value; 
       break; 
      } 
     } 
    if(lvlmsg=="") 
     { 
      msg+="You Must Indicate Your Level"; 
      result=false; 
      document.getElementById('radioButtons').style.color="red"; 
     } 
    else 
     { 
      alert(lvlmsg); 
     } 

    if(msg==""){ 
     return result; 
    } 
    else{ 
     alert(msg); 
     return result; 
    } 
}

任何想法？

來源

2015-05-13 VaTo

放置一個//在每個警報的前面（） – Roberto

我建議你先創建* error *元素，放置它們並按照自己的喜好設置它們，然後向它們添加'display：none'。當您發現錯誤時，不要顯示警報，只需將顯示切換到「block」。 – JCOC611

我建議你學會更符合你的風格。事實上，它甚至不是一個造型的選擇，爲將來的參考開放括號與聲明相同。 –

每個輸入後，創建一個span元素：

<form name="ExamEntry" method="POST"> 
    <input type="text" id="name" name="name" /><span id="name-msg"></span> 
    <input type="text" id="subject" name="subject" /> <span id="subject-msg"></span> 
    <input type="text" id="examnumber" name="examNumber" /> <span id="examnumber-msg"></span> 
    <input type="submit" name="submit" value="Submit" onlick="return validateForm()" /> 
</form>

然後，而不是這樣做的：

msg+="You Must Indicate Your Level";

務必：

var msg = document.createTextNode("You Must Indicate Your Level"); 
document.getElementById('name-msg').appendChild(msg);

而且不要忘記刪除警報！

來源

2015-05-13 23:14:38

感謝它正在工作，雖然我不知道爲什麼當我執行代碼時，它只顯示1秒鐘的紅色消息，然後他們消失了。我希望他們留下來，直到我再次點擊提交，這裏是我的代碼：http://fixee.org/paste/8itu4fo/ – VaTo

你可以檢查appendChild在這裏的工作方式http://www.w3schools.com/jsref/met_node_appendchild .asp可能你做錯了什麼，對不起，我現在無法測試你的代碼 –

確保在您的實際代碼，您正在使用的onclick，而不是點擊數;）

當我建立表單驗證，我旁邊的每個元素創建一個隱藏的內嵌跨度。

<form name="ExamEntry" method="POST"> 
<input type="text" id="name" name="name" /><span>Please use a valid name.</span> 
<input type="text" id="subject" name="subject" /><span>Please use a valid subject.</span> 
<input type="text" id="examnumber" name="examNumber" /><span>Please use a valid exam number.</span> 
<input type="submit" name="submit" value="Submit" onlick="return validateForm()" /> 
</form>

在你的CSS

然後，這樣做：

input + span { 
    display:none; 
    color: red; 
}

在你的js刪除警報，並添加這樣的事對於每個輸入：

document.getElementById("[id]").style.display = "inline";

來源

2015-05-13 23:22:06

ooops，關於onlick的好電話:) – VaTo

Javascript驗證表單沒有提醒（）

回答

相關問題