jQuery 验证提交按钮不起作用答案

【问题标题】：jQuery validation submit button is not workingjQuery 验证提交按钮不起作用
【发布时间】：2018-02-14 18:10:02
【问题描述】：

我想寻求帮助修复此代码以进行移动验证。我已经解决了关于我的验证的问题，但我现在的问题是它不会提交我的表单。当我尝试在提交 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>

感谢您的帮助

【问题讨论】：

我建议在表单标签中使用 return fun() 进行验证
@Anandhunadesh 没有明白你的意思。 return fun() 有什么用？
onsubmit = return validate()
更改按钮以提交。然后在表单标签中添加上述内容。仅当满足所有验证条件时才从 validate() 中返回 true，否则返回 false，以便表单不会提交
@Anandhunadesh 请告诉我你的结构

标签： jquery forms validation

【解决方案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>

【讨论】：

Status 应该是一个布尔值 true 或 false，而不是字符串的 "true" 或 "false"。
@Steve 是的，谢谢。进行了更改。但这对我来说效果很好，顺便说一句