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>