Я упростил код, чтобы решение стало очевидно:
<form action="">
<p>Пароль:<input type="password" name="password1" id="password1" /></p>
<p>Повторите пароль:<input type="password" name="password2" id="password2" /></p>
<p>Email: <input type="text" name="email" id="email" /></p>
<p><input type="submit" id="submit_button" onclick="return validateForm()"/></p>
</form>
function validateForm () {
// проверяем пароли
// выбираем элементы
var password1 = document.getElementById('password1');
var password2 = document.getElementById('password2');
// сравниваем написанное, если не равно, то:
if (password1.value !== password2.value) {
// сообщаем пользователю, можно сделать как угодно
alert('Проверьте пароли!');
// сообщаем браузеру, что не надо обрабатывать нажатие кнопки
// как обычно, т. е. не надо отправлять форму
return false;
}
// проверяем email
var email = document.getElementById('email');
// регулярка для проверки, не знаю, работает ли приведенный в примере
var email_regexp = /[0-9a-zа-я_A-ZА-Я]+@[0-9a-zа-я_A-ZА-Я^.]+\.[a-zа-яА-ЯA-Z]{2,4}/i;
// проверяем значение поля email, если нет, то:
if (!email_regexp.test(email.value)) {
alert('Проверьте email');
return false;
}
}
Подробнее про return false . Здесь хочу отметить, что в случае ошибки функция возвращает ложь, а строчка в onclick кнопки возвращает значение функции всегда, т. е. при ошибке в onclick возвращается false.
Я также не был уверен в правильности регулярного выражения, приведенного выше, потому взял простейшее для проверки email. Про них можно прочитать на сайте.
Первая и главная ошибка, которая бросилась в глаза - неправильная верстка формы, т. е. 2 тега form. Кнопка submit должна находится в той же форме, которую отправляет. Подробнее
тут.
Пример
тут.