使用气球弹出窗口进行jsp表单验证

Question

我创建了以下表单，并希望在单击“注册”按钮后验证每个文本框。

我是javascript的新手并且不知道它是如何工作的。还需要在文本框附近显示错误消息作为气球弹出窗口。

请建议javascript有用的提示。

即使在我填写下面提到的任何一个文本框之后，javascript也在数据库中提交值。但实际情况应该是按顺序扫描每个文本框并显示错误消息。

function validateform()
{  

    var fn=document.getElementsByName("fname")[0].value;

    if(fn==null || fn==""){
        document.getElementById("bubble1").style.visibility="visible";
        return false;
    }
    else{
        document.getElementById("bubble1").style.visibility="hidden";
        return true;
    }

    var ln=document.getElementsByName("lname")[0].value;

    if(ln==null || ln==""){
        document.getElementById("bubble2").style.visibility="visible";
        return false;
    }
    else{
        document.getElementById("bubble2").style.visibility="hidden";
        return true;
    }
}

请建议出了什么问题！

Answer 1

有许多方法可以实现您所取得的成就，其中大部分都是使用js事件处理程序完成的。 在这种情况下，您可以使用不同的事件“类型”，具体取决于您希望显示错误的时间，我建议您在案例中使用表单按钮上的提交，但您也可以检查在每次输入时更改，以便立即向用户显示错误。

使用纯javascript的最简单方法可能是这样的：

   <form action="youraction" method="post" onsubmit="checkFields();">
   ....
   </form>

在你的js代码中你需要这样的东西：

   function checkFields(){
    var email = document.getElementById("email").value;
    var name = document.getElementById("name").value;
    var surname = document.getElementById("surname ").value;
    ...

    //validate your text fields, using regular expressions maybe
    if (!checkMail(email)){
      //attach a div to the body(absolute positioning) with the error
      return false; //this is important, it prevents the window from refreshing, aborting the submit
     }
     .....
     return true //everything is good, you can submit
  }

还有很多其他方法，例如使用jQuery，但这可能会很好。