javascript - JQuery 基本フォーム投稿

Question

フォームを検証していますが、検証に合格しない場合でもフォームが投稿されます。これを防ぐにはどうすればよいですか？

<form action="/Account/Registration" method="get">
           <fieldset id="enterCode">
                <ul>
                    <li class="inputBlock">
                        <input type="text" id="Code" name="Code" value="">

                    </li>
                </ul>

            </fieldset>
            <div class="submitBlock">
                <input type="submit" value="Send" class="button" onclick="validate();" />
            </div>
        </form>

        <script type="text/javascript">
            function validate() {

                var val = $('#Code').val();

                if (val == "") {
                    alert("Please enter code");
                }

                return false;


                }

        </script>

Answer 1

私は次のようにします：

    <form action="/Account/Registration" method="get" id="registrationForm">
       <fieldset id="enterCode">
            <ul>
                <li class="inputBlock">
                    <input type="text" id="Code" name="Code" value="">

                </li>
            </ul>

        </fieldset>
        <div class="submitBlock">
            <input type="submit" value="Send" class="button" id="submitButton" />
        </div>
    </form>

    <script type="text/javascript">
        $(function(){
          $('#submitButton').click(function(e){ 
             e.preventDefault();
             var val = $('#Code').val();
             if (val.length > 0) {
                 $('#registrationForm').submit();
              }

          });
        });
    </script>

Answer 2

送信イベントの発生を停止するか、発生したときに、ボタンのクリック イベントではなくそのイベントで false を返すことによって停止する必要があります。bunting の例のように送信ボタンの動作を変更するか、送信イベントをフォーム自体にバインドすることができます。

<form action="/Account/Registration" method="get" id="registrationForm">
   <fieldset id="enterCode">
        <ul>
            <li class="inputBlock">
                <input type="text" id="Code" name="Code" value="">

            </li>
        </ul>

    </fieldset>
    <div class="submitBlock">
        <input type="submit" value="Send" class="button" />
    </div>
</form>

<script type="text/javascript">
    $(document).ready(function () {
        $('#registrationForm').submit(function () {
            var val = $('#Code').val();
            if (val == "") {
                alert("Please enter code");
                return false;
            }
            return true;
        });
    });
</script>