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验证表单没有提醒（）

回答

相关问题