form送信する前にバリデーションを当てたい

Question

今、ユーザーに入力させそれをconfirm.phpという確認画面で見せるプログラムを作っているのですが、formにバリデーションを当ててもaction=confirm.phpへ行ってしまいます。
リンクしてしまう前にvalidationを当てるにはどうしら良いでしょうか?
今のhtmlは以下です。

<main>
	<form action="confirm.php" method="post" name="form" onsubmit="return validate()">
		<p>あなたの達成したい目標をご入力の上、「確認画面へ」ボタンをクリックしてください。</p>
			<div class="forms">
            	<p class="form-group">
					<label>お名前</label>
					<input type="text" name="name" placeholder="例）山田太郎" value="">
				</p>


				<p class="form-group">
					<label>メールアドレス<span>(必須)</span></label>
					<input type="text" name="email" placeholder="例）[e-mail]" value="">
				</p>

				<p class="form-group">
					<label>目標<span>(必須)</span></label>
					<input type="text" name="goal" placeholder="例）10億円でバイアウト" value="">
				</p>

				<p class="form-group">
					<label>期限<span>(必須)</span></label>
					<input type="date" name="deadline" value="2018-01-01">
				</p>

				<p class="form-group">
					<label>リマインド頻度<span>(必須)</span></label>
					<select name="remind_frequency">
						<option value="everyDay">毎日</option>
						<option value="everyWeek">毎週</option>
						<option value="everyMonth">毎月</option>
						<option value="everyYear">毎年</option>
					</select>
				</p>
				<p class="form-group">
					<label>目標詳細</label>
					<textarea name="gaol_detail" rows="10" placeholder="30歳で10億円の企業のバイアウトをして、その後はどんどんん新しいサービスの開発に携わる。"></textarea>
				</p>
			</div>
			<button type="submit" id="form_id" class="btn-gradient blue">確認画面へ</button>
		</form>
</main>

そしてjqueryで制御しようとしたのが以下のコードです。
参考にしているのは以下のサイトです。
http://qiita.com/kazu56/items/cdbf4e371cdc699709f1
http://d.hatena.ne.jp/gelegele/20120615/form_validation
http://uxmilk.jp/9235

$(function(){

    $('#form_id').submit(function(){
        var error; // エラー用の変数を定義

		var name_value = $("input[name=name]").val();
			email_value = $("input[name=email]").val();
			goal_value = $("input[name=goal]").val();
			deadline_value = $("input[name=deadline]").val();
			remind_frequency_value = $("[name=remind_frequency]").val();


		if(name_value == ""){
			alert("名前を入力してください");
			return false;
		}
		if(email_value == ""){
			alert("アドレスを入力してください");
			return false;
		}
		if(goal_value == ""){
			alert("目標を入力してください");
			return false;
		}
		if(deadline_value == ""){
			alert("期限を入力してください");
			return false;
		}
		if(remind_frequency_value == ""){
			alert("頻度を入力してください");
			return false;
		}
		return false;
	});
});

わかるかた、心当たりあるかたご教授いただきますと嬉しいです。
よろしくお願いいたします。

Answer 1

最後までreturn false;としてしまうと、無条件にフォームが送信不能となります。最後のは外しましょう。

Comments

[hatsu]

maisumakun様
ご回答ありがとうございます。
最後のreturn falseを外したところ、hellomartha様のご回答と合わせて問題解決いたしました。
ありがとうございます。

Answer 2

submitイベントはformから発生します。
buttonに付けているのでバリデーション部分は通過してません。

$('form').submit(function(){
//以下略

Comments

[hatsu]

hellomartha様。ご回答ありがとうございます。
そうだったんですね。自分の勉強不足でした。
hellomartha様のご回答の通りに行ったところ解決いたしました。
ありがとうございます。