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而不是按鈕的click事件來暫停它。 您可以更改提交按鈕在bunting示例中的行為方式，或將submit事件綁定到表單本身。

<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>