alert not displaying in JS

问题

alert is not working as expected! i don't know why... I am trying to evaluate a form on client side. I have tried getElementsById, getElementsByName. Where am i going wrong? I am sure the flow of control goes through validate() an alert statement immediately inside validate method is being displayed!

Here is my code:

     <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1" errorPage="Error.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
function validate() {
    var uname = document.getElementById("uname").value;
    var email = document.getElementById("email").value.indexof('@');
    var pass = document.getElementById("pass").value;
    var rpass = document.getElementById("rpass").value;
    submitOK = true;

    if (uname.length == 0) {
      alert("Username cannot be empty")
      submitOK = false;
    }
    if (email == -1) {
      alert("Not a valid email");
      submitOK = false;
    }
    if (pass.length === 0) {
      alert("Password cannot be empty");
      submitOK = false;
    }
    if (pass != rpass) {
      alert("passwords don't match");
      submitOK = false;
    }
    return submitOK;
  }
</script>
<title>Register</title>
</head>
<body>
<h1>Register</h1>
<br />
<form action="RegInt.jsp" method="post" onsubmit="return validate()">
Enter UserName : <input type="text" name="uname" id="uname" value='${ param.uname}'placeholder="Enter Name" ><br/><br/>
Enter Email:     <input type="email" name="email" id = "email" value='${param.email}'placeholder="Enter Email"><br/><br/>
Enter Password:  <input type="password" name="pass" id = "pass" value='${param.pass}'placeholder="Enter password"><br/><br/>
Repeat Password: <input type="password" name="rpass" id = "rpass" value='${param.rpass}'placeholder="Repeat Password"/><br/>
    <br/><br/>
<input type="submit"/>
</form>
<h4>${errorMsg}</h4>

</body>
</html>

回答1:

Spelling of alret and indexOf !
getElementById is singular
submitOK="false" sets submitOK to true since a non-empty string is truthy. use submitOK=false
you did not return submitOK when you asked the question

    function validate() {
      var uname = document.getElementById("uname").value;
      var email = document.getElementById("email").value.indexOf('@');
      var pass = document.getElementById("pass").value;
      var rpass = document.getElementById("rpass").value;
      submitOK = true;

      if (uname.length == 0) {
        alert("Username cannot be empty")
        submitOK = false;
      }
      if (email == -1) {
        alert("Not a valid email");
        submitOK = false;
      }
      if (pass.length === 0) {
        alert("Password cannot be empty");
        submitOK = false;
      }
      if (pass != rpass) {
        alert("passwords don't match");
        submitOK = false;
      }
      return submitOK;
    }

<h1>Register</h1>
<br />
<form action="RegInt.jsp" method="post" onsubmit="return validate()">
  Enter UserName :
  <input type="text" name="uname" id="uname" value='${ param.uname}' placeholder="Enter Name">
  <br/>
  <br/>Enter Email:
  <input type="email" name="email" id="email" value='${param.email}' placeholder="Enter Email">
  <br/>
  <br/>Enter Password:
  <input type="password" name="pass" id="pass" value='${param.pass}' placeholder="Enter password">
  <br/>
  <br/>Repeat Password:
  <input type="password" name="rpass" id="rpass" value='${param.rpass}' placeholder="Repeat Password" />
  <br/>
  <br/>
  <br/>
  <input type="submit" />
</form>

回答2:

First check the spelling s and correct them. Then comment all the feilds and start troubleshooting them line by line. You will win. Regards !

来源：https://stackoverflow.com/questions/32602245/alert-not-displaying-in-js

标签

javascript

validation

alert