Modal Window Formでのイベント発生

Question

お世話になってます。
今、モーダルウィンドウからDBへinsertをさせるフォームを
作成しています。
その際、確認用パスワードを設けておりますが、上手く制御が
掛からずそのままinsertされてしまいます。
確認用パスワード及びバリデーション含め最適な方法は
ありますでしょうか？
お分かりの方おられましたら、ご教示下さい。

Modal_Form()

<div class="modal fade" id="registForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title" id="myModalLabel">新規登録フォーム</h4>
        </div>
          <div class="modal-body">
          <p>今すぐあなた専用のアドレスを作成しましょう。</p>
	     
	<form id="regist_Form">
	 {{ csrf_field() }}
         <div class="form-group">
            <label for="username" class="control-label">ユーザー名</label>
            <input type="text" class="form-control" id="username" name="username" value="{{ old('username') }}" placeholder="[e-mail]" required/>
         </div>

	 <div class="form-group">
            <label for="mail" class="control-label">希望アドレス</label>
            <input type="text" class="form-control" id="mail" name="mail" value="{{ old('mail')}}" required title="この項目は必須です。">@gay86.com
	</div>

          <div class="form-group">
            <label for="password" class="control-label">パスワード(半角英数字)</label>
            <input type="password" class="form-control" id="password" name="password" value="" required title="この項目は必須です。">
	  </div>
            
          <div class="form-group">
            <label for="password_2" class="control-label">パスワード(確認)</label>            
	    <input type="password" class="form-control" id="password_2" name="password_2" value="{{ old('password_2')}}" required title="この項目は必須です。">
	  </div>
	   
          <div class="form-group">
            <label for="to-mail" class="control-label">連絡用アドレス</label>
            <input type="mail" class="form-control" id="Nitta_mail" name="Nitta_mail" value="{{ old('Nitta_mail')}}" required title="この項目は必須です。">
	  </div>
	　　
　　　　　 <div id="result"></div>

          <button type="submit" id="gay_resgister" class="btn btn-primary btn-block">登録</button>
          
 	</form>
      </div><!-- / .modal-body -->
      <div class="modal-footer">
       
      <button type="button" class="btn btn-danger" data-dismiss="modal">キャンセル</button>
      </div><!-- / .modal-footer -->
    </div><!-- / .modal-content -->
  </div><!-- / .modal-dialog -->
</div><!-- / #loginForm .modal fade -->

JS

<script>
      $(function () {

       $("#gay_resgister").click(function () {
          
          var pass_2 = document.getElementById("password_2").value;
          var pass = document.getElementById("password").value;
 
          if( pass_2 == pass ){
              document.getElementById("regist_Form").setAttribute("action",'mailbox');    
              document.getElementById("regist_Form").setAttribute("method",'post'); 
          }else{
               toastr.error("パスワードが異なります");
          }
        }

     });

</script>    

Route(Laravel)

Route::post('mailbox', 'GayregistController@Gay_register');
　

目的
フォームからaction設定しpost送信し、Laravelのコントローラーを利用してinsert。

試したこと
①modalウィンドのbuttonタグにonclick属性を設定して、関数を呼び込んだが変わらない。

　<button type="submit" id="gay_resgister" class="btn btn-primary btn-block"　onclick="btn1click()">登録</button>

JS側

$(function(){
  　function btn1click(){
    　//処理
  　}
});

②JS内を一部調整⇒変わらない

　if( pass_2 != pass ){
      toastr.error("パスワードが異なります");   
 }else{
      document.getElementById("regist_Form").setAttribute("action",'mailbox');    
      document.getElementById("regist_Form").setAttribute("method",'post'); 
  }

以上、よろしくお願いいたします。

解決方法

<button type="submit" id="gay_resgister" class="btn btn-primary btn-block">登録</button>

上記を以下に

<input type="button" id="gay_resgister"　class="btn btn-primary btn-block" value="登録">

Answer 1

どこが悪いのでしょうか？

組まれている通り動いているので「悪い」という考え方はよろしくないのですけど、
「submitだから」です。submitの仕様を確認してください。
明示的にとめない限りは何をしててもそのまま送信します。

いずれにしても送信する情報をJavaScriptだけでチェックするのはセキュリティ上、よろしくないので(フロントエンドのコードは改竄できるから)、サーバーサイドでのバリデーションは必須です。
GETでフォーム送信する内容でもないと思います。

Comments

[Nitta]

m.ts10806様
返信ありがとうございます。
<input type="button" >に切り替え制御は掛かるようになりました。
ありがとうございます。
只、この状態から上記のようなajax通信でpost送信をしても、
ルートには入らないようです。
何か最適な方法はありますでしょうか？
上記『JS調整後』を参照下さい。

[m.ts10806]

最適も何も 「./mail」で送られるリクエスト先URLのルーティングがないからじゃないですか？
コードと設計の整合性は常に確認してください。ドキュメントも無視してはいけません。

それに本件が解決したのなら一度解決済みにして自身で試行錯誤すべきかと。

[Nitta]

申し訳ございません。
一旦クローズします。
大変、参考になりました。
ありがとうございました。

[m.ts10806]

毎度のことのように思いますが、
拾ってきたコードを雑に組み合わせてやろうとしている気がしてなりません。だから丸投げになります。
理解してないコードは使ってはいけません。

[Nitta]

細かいところまで、ありがとうございます。
大変感謝しております。