Javascript无法在WAMP上运行，但如果没有WAMP，则可以正常运行

Question

I just started learning PHP and WAMP. Before that I created a set of webpages using HTML,CSS, and JS. The JS is for validating the form, and if everything goes well it will jump to a php page that insert data into sql database.

The simplified form.html and validation.js are:

function validation() {
  var emailCheck = email.search(/^[a-zA-z0-9_]+\@[a-zA-z0-9_]+\.[a-zA-z]{2,3}$/);
  if (emailCheck==-1) alert("Please enter a valid email address");
  else document.getElementById("signup").action = "success.php";
 }

The Form code

<form id="signup" class = "signup" method="POST">
  .....
<input type="text" name="email" id="email" required/>
  ....
<button class = "button3" onclick = "validation()">Submit</button>
</form>

The success.php is simply to insert data to the mySQL database.

Now I run the form.html without using the localhost, the javascript works perfectly. The alert window shows up if I enter wrong stuff.

If I run localhost/form.html with WAMP, when I enter wrong stuffs, the javascript doesn't work. The alert window doesn't show up. BUT when I pass the validation, it successfully jumps to the success.php.

Therefore, I consider the Javascript is working but somehow part of it doesn't since the javascript is the only connection between the form.html and success.php.

Any idea?

Answer 1

variable "email" is undefined, so you can't using search function on a undefined variable. You need get the email value first.

function validation() {
    var emailCheck = document.getElementById("email").value.search(/^[a-zA-z0-9_]+\@[a-zA-z0-9_]+\.[a-zA-z]{2,3}$/);
    if (emailCheck==-1) alert("Please enter a valid email address");
    else document.getElementById("signup").action = "success.php";
}