为什么JS警报会杀死我的注册表单？

Question

I just finished my first working registration form connected to a database. Actually, it's basically a copy of a tutorial demo @ http://jqueryvalidation.org/files/demo/milk/ except I had to add the database stuff.

I still have one minor bug. The form doesn't work unless I delete this code:

// specifying a submitHandler prevents the default submit, good for the demo
submitHandler: function() {
alert("submitted!");
},

It's kind of trivial, but it would be nice if the user could see some sort of "Success" message when they click the Submit button. I didn't want to post all the code, but I have a live page @ http://www.govwa.org/test/registration.php

This is the PHP code that I inserted just before the form closing tag:

include('config.php');
$pdo = connect();

// adding new member using PDO with try/catch to escape the exceptions
try {
 $sql = "INSERT INTO g1_members (firstname, lastname, username,  password, password_confirm, email) VALUES (:firstname, :lastname,  :username, :password, :password_confirm, :email)";
  $query = $pdo->prepare($sql);
  $query->bindParam(':firstname', $_POST['firstname'], PDO::PARAM_STR);
  $query->bindParam(':lastname', $_POST['lastname'], PDO::PARAM_STR);
  $query->bindParam(':username', $_POST['username'], PDO::PARAM_STR);
  $query->bindParam(':password', $_POST['password'], PDO::PARAM_STR);
  $query->bindParam(':password_confirm', $_POST['password_confirm'],  PDO::PARAM_STR);
  $query->bindParam(':email', $_POST['email'], PDO::PARAM_STR);
  $query->execute();
  } catch (PDOException $e) {
  echo 'PDOException : '.  $e->getMessage();
 }

Does anyone have a hunch what the problem might be? Alternatively, is there another way of displaying a message when someone clicks the Submit button?

Answer 1

The submitHandler replaces the default submit, so the form is never submitted when you add that handler, you have to do it manually.

From the documentation

Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it is validated.

either remove it, or submit the form once valid in the handler

submitHandler: function(form) {
    alert("submitted!");
    form.submit()
},