Question

我对这段JavaScript代码有点麻烦。我正在尝试验证字段，如果字段在按钮单击时有效，我希望转到jquery mobile中的另一个页面。我知道我很接近..使用当前代码，当我点击时，它不会转到第二页（＃benefits-facts），只有在我刷新页面之后

<div data-role="page" id="first-page">

            <form>

            <p data-id="Email Address:p" style="margin-bottom: 0px; background-color:#FFFFFF" >
            <label data-id="Email Address:label" data-name="email" class="ctct-form-required" style="display:none;">Email Address</label> 
            <input name="email" type="email" autofocus required placeholder="Email Address" value="" maxlength="80" data-id="Email Address:input"></p>

               <p data-id="First Name:p" style="margin-top: 0; background-color:#FFFFFF">
        <label data-id="First Name:label" data-name="first_name" class="ctct-form-required" style="display:none;">First Name</label> 
          <input name="first_name" type="text" required placeholder="First Name" value="" maxlength="50" data-id="First Name:input">
        </p>

            <button type="submit" id="submitBtn" class="Button ctct-button Button--block Button-secondary" style="background-color:#3598DB; color:#ffffff;" data-enabled="enabled">Get Access</button>
            </form>

</div>

<div data-role="page" id="benefits-facts">
<h1> benefits and facts page </h1>

</div>

            <script>
                   $.fn.isValid = function(){
                    return this[0].checkValidity()
                }


                    if ($('input[name="first_name"]').isValid() ) { 

                    $('#submitBtn').click(function() {
                    $.mobile.navigate('#benefits-facts');

                });

                    }
    </script>

Answer 1

在click事件中移动有效检查。在上面的代码中，click事件不会被触发。

$('#submitBtn').click(function() {
                        if ($('input[name="first_name"]').isValid())                        
                            $.mobile.navigate('#benefits-facts');
            });

jquery移动表单检查是否在提交时验证，导航到另一页面

1 个答案: