jQuery驗證提交按鈕不起作用

Question

我想尋求幫助來修復此代碼以進行移動驗證。 我已經解決了有關驗證的問題，但現在的問題是它不會提交我的表格。 當我嘗試刪除Submit div上的type =“ button”時，無論是否有錯誤消息，它都會發送表單。 也許有其他方法可以不刪除type =“ button”。

這是我的jQuery代碼。

        <script>
        function showError(sel, msg) {
            var selector = sel;
            $(selector).text(msg).show();
        }

    function hideError(sel, msg) {
        var selector = sel;
        $(selector).text("").hide();
    }


    $(document).ready(function() {
        $('#lbform button').click(function() {
            var errormsg = 0;
            var gender = $("select[name=gender2]").val();
            var sel = ".error-msg-gender";
            if (gender) {
                hideError(sel, msg);
                errormsg = 0;
            } else {
                var msg = "This field is required";
                showError(sel, msg);
                errormsg = 1;
            }

            var val = $("input[name=firstname]").val();
            var sel = ".error-msg-fname";
            if (val && val.length > 1) {
                var pattern = /^[a-zA-Z\s]*$/;
                if (pattern.test(val)) {
                    hideError(sel, msg);
                    errormsg = 0;
                } else {
                    var msg = "Should only contains letters and spaces.";
                    showError(sel, msg);
                    errormsg = 1;
                }
            } else {
                var msg = "Should have at least 2 characters.";
                showError(sel, msg);
                errormsg = 1;
            }

            var year = $(".year").val();
            var month = $(".month").val();
            var day = $(".day").val();
            var sel = ".error-msg-dob";
            if (year && month && day) {
                hideError(sel, msg);
                errormsg = 0;
            } else {
                var msg = "All fields must not be empty.";
                showError(sel, msg);
                errormsg = 1;
            }

            var email = $("input[name=email]").val();
            var sel = ".error-msg-email";
            if (email) {
                var pattern = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

                if (pattern.test(email)) {
                    hideError(sel, msg);
                    errormsg = 0;
                } else {
                    var msg = "Not a valid email address.";
                    showError(sel, msg);
                    errormsg = 1;
                }
            } else {
                var msg = "Email field must not be empty.";
                showError(sel, msg);
                errormsg = 1;
            }



            var password = $("input[name=password]").val();
            var sel = ".error-msg-pass";
            if (password) {
                if (password.length > 3) {
                    hideError(sel, msg);
                    errormsg = 0;
                } else {
                    var msg = "Should have at least 4 characters.";
                    showError(sel, msg);
                    errormsg = 1;
                }
            } else {
                var msg = "Password field must not be empty.";
                showError(sel, msg);
                errormsg = 1;
            }

            if(errormsg == 0) { $("#lbform").trigger("submit"); }
            else {}

        });
    }); 
    </script>

這是我的html：

    <form id="lbform" class="formlayout" action="http://www.ediwow.com/signup.cfm" method="post">
    <fieldset>
        <div class="magic">
            <input type="hidden" value="1" name="sexuality">
        </div>

        <div class="row cf">
            <select name="gender2" id="dating-gender2" class="required gender gender2">
                <option value="1" selected="selected">Man looking for a woman</option>
                <option value="2">Woman looking for a man</option>
            </select>
            <div class="error-msg-gender"></div>
        </div>

        <div class="row cf">
            <input type="text" class="text blur" placeholder="First name:" name="firstname">
            <div class="error-msg-fname"></div>
        </div>

        <div class="row cf">
            <select class="day" name="dobday">
                <option value="">Day</option>
                <option value="1">01</option>
                <option value="2">02</option>
                <option value="3">03</option>

                <option value="4">04</option>
                <option value="5">05</option>
                <option value="6">06</option>
                <option value="7">07</option>
                <option value="8">08</option>
                <option value="9">09</option>

                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>

                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>

                <option value="22">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
                <option value="25">25</option>
                <option value="26">26</option>
                <option value="27">27</option>

                <option value="28">28</option>
                <option value="29">29</option>
                <option value="30">30</option>
                <option value="31">31</option>
            </select>

            <select class="month" name="dobmonth">
                <option value="">Month</option>
                <option value="1">January</option>
                <option value="2">February</option>
                <option value="3">March</option>
                <option value="4">April</option>
                <option value="5">May</option>
                <option value="6">June</option>
                <option value="7">July</option>
                <option value="8">August</option>
                <option value="9">September</option>
                <option value="10">October</option>
                <option value="11">November</option>
                <option value="12">December</option>
            </select>

            <select class="year" name="dobyear">
                <option value="">Year</option>
                <?php for($x=date("Y") - 18; $x >= 1918; $x--): ?>
                    <option value="<?php echo $x; ?>">
                        <?php echo $x; ?>
                    </option>
                    <?php endfor; ?>
            </select>
            <div class="error-msg-dob"></div>
        </div>

        <!-- The <p> tags below can be swapped from an image. -->
        <div class="continue-btn">
            <a onclick="showHide('example');return false;" class="showLink" id="example-show" href="#">
                    Continue
                </a>
        </div>

        <!-- Anything that sits in the div class=more will be hidden until the Continue link is clicked -->
        <div class="more" id="example">
            <div class="row cf">
                <input type="text" class="text blur" placeholder="Email:" name="email" id="email">
                <div class="error-msg-email"></div>
            </div>

            <div class="row cf">
                <input type="password" value="" name="password" placeholder="Password:" id="password">
                <div class="error-msg-pass"></div>
            </div>

            <div class="row cf">
                <button class="header" type="button">JOIN FREE</button>
            </div>

            <div class="row cf">
                <span class="note">By clicking 'Join Free' you are agreeing to our <br><a title="Terms of use" href="http://www.ediwow.com/terms" class="orange-color" target="blank">Terms of Use</a></span>
            </div>
        </div>
    </fieldset>
</form>

感謝您的幫助

Answer 1

像這樣改變你的形式

 <form id="lbform" class="formlayout" action="http://www.ediwow.com/signup.cfm" method="post" onsubmit= "return validate()">

    // form elements

     <div class="row cf">
           <input type="submit" class="header" value="JOIN FREE">
     </div>
</form>

然后像這樣創建驗證功能

<script>
function validate()
{
 var status=true;
 var gender = $("select[name=gender2]").val();
if( /*check ur validation condition here for ex:*/ gender=""  )
   {
     status=false;//add this line whenever the validation return false
     //Display message if needed
   }

//Rest of the validation like the above
//status remain true only if all the validation conditions satisfied.else it becomes false

return status;//return the current value in status after all val conditions are considered.
}
</script>