jQuery 移动 - 提交表单时切换页面

Question

当我在 jquery mobile framework 中提交我的表单时，它将返回到 first page (#page)，在本例中是我的菜单！我正在使用 jquery form validation plugin.

完成所有 form validation 后，我需要它来显示 alert box。目前，当所有 data 都正确并且我单击 submit 时，它将返回到主页并且什么都不做。但是如果我 refresh 主页，它会显示 alert box ("all good")...很奇怪，我知道！

我找遍了所有地方，但找不到任何可以解决我问题的方法，我尝试添加 method='post'，但所做的只是显示 error loading page，什么都不做

Html

            <form  id='valForm'>
        <!-- Name, Age -->
          <div data-role="fieldcontain">
            <label for="txtNamev">Name:</label>
            <input type="text" name="txtNamev" id="txtNamev" value=""  />
          </div>
          <div data-role="fieldcontain">
            <label for="numAgev">Age:</label>
            <input type="number" name="numAgev" id="numAgev" value=""  />
          </div>
          
          <!-- Sex, Default value = Male-->
          <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal">
              <legend>Sex</legend>
              <input type="radio" name="sexv" id="sex_malev" value="Male"  />
              <label for="sex_malev">Male</label>
              <input type="radio" name="sexv" id="sex_femalev" value="Female" checked='checked' />
              <label for="sex_femalev">Female</label>
            </fieldset>
          </div>
          
          <!-- Emails -->
          <div data-role="fieldcontain">
            <label for="txtEmailv">e-mail:</label>
            <input type="email" name="txtEmailv" id="txtEmailv" value=""  />
          </div>
          <div data-role="fieldcontain">
            <label for="txtEmailv1">Confirm e-mail:</label>
            <input type="email" name="txtEmailv1" id="txtEmailv1" value=""  />
          </div>
          
          <!-- Interest In checkboxes -->
          <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
              <legend>I am interested in the following</legend>
              <input type="checkbox" name="interestv[]" value='Comet' id="interest_0v" class="custom" value="" />
              <label for="interest_0v">Comet</label>
              <input type="checkbox" name="interestv[]" value='Common Goldfish' id="interest_1v" class="custom" value="" />
              <label for="interest_1v">Common Goldfish</label>
              <input type="checkbox" name="interestv[]" id="interest_2v" class="custom" value="Black Moor" />
              <label for="interest_2v">Black Moor</label>
              <input type="checkbox" name="interestv[]" value='Celestial Eye' id="interest_3v" class="custom" value="" />
              <label for="interest_3v">Celestial Eye</label>
              <input type="checkbox" name="interestv[]" value='Fantail' id="interest_4v" class="custom" value="" />
              <label for="interest_4v">Fantail</label>
              <input type="checkbox" name="interestv[]" value='Lionchu' id="interest_5v" class="custom" value="" />
              <label for="interest_5v">Lionchu</label>
              <input type="checkbox" name="interestv[]" value='Other'  id="interest_6v" class="custom" value="" />
              <label for="interest_6v">Other</label>
            </fieldset>
          </div>
          <div data-role="fieldcontain" class='display'>
            <label for="txtVariety">Fish Varieties:</label>
            <textarea cols="40" rows="8" name="txtVariety" id="txtVariety"></textarea>
          </div>
                    <p id='checkboxError'></p>
    
          
          <!-- Text Area - Fish Varieties -->
         
          
          <!-- Drop down select menu - How did u hear about us -->
          <div data-role="fieldcontain">
            <label for="selectmenu" class="select">How did you hear about us?:</label>
            <select name="selectmenu" id="selectmenu" multiple='multiple' data-native-menu='false'>
            <option disabled='disabled' value='Pick one or more options' id='selectChecked'>Pick one or more options</option>
              <option value="Internet">Internet</option>
              <option value="Email">Email</option>
              <option value="Friend">Friend</option>
              <option value="Billboard">Billboard</option>
              <option value="Other">Other</option>
            </select>
          </div>
          
          <!-- Register & Start again buttons -->
          <input type="submit" id='submitv' value="Register"/>
          <input type="submit" id='resetFormv' value="Start Again" />
    </form>
            <!-- Print out the details -->      
            <div id='printDetails'></div>
    
    
          
                    
            
            
        </div>
        <div data-role="footer">
            <h4>James Wainwright</h4>
        </div>
    </div>


##jQuery
$(document).ready(function() {


    
    var ok = false;
    $("#errorBox").hide();
    
    var validForm = $("#valForm").validate({
    
        errorContainer:"#errorBox",
        errorLabelContainer:"#errorBox ul",
        wrapper:"li",
        
        rules:{
            txtNamev:{
                required:true,
                minlength:5,
                //noAnon:true
            },
            numAgev:{
                required:true,
                
            },
            txtEmailv:{
                required:true,
                email:true
            },
            txtEmailv1:{
                required:true,
                email:true,
                equalTo:"#txtEmailv"
            },
            'interestv[]':{
                required:true,
                minlength: 1
            }    
        },
        messages:{
            txtNamev:{
                required:"Your name must be more than 5 characters",
                minlength:jQuery.format("You need at least {0} characters for your name")
            },
            numAgev:{
                required:"Please enter an age"
            },
            txtEmailv:{
                required:"You must enter an E-mail Address"
            },
            txtEmailv1:{
                required:"Please confirm your email",
                equalTo: "The email must match the above"
            },
            'interestv[]':{
                required:"Check atleast one checkbox"
            }
        }
            
    });
    
    if(validForm.form())
    {
        alert("All is good");
    }
    
    /*Please take note that my checkbox validation is working, if you click on one and click submit the message will go away
    But please click submit without checking all the other buttons, as the form will just loop to the homepage
    */
    
});

Answer 1

您没有阻止表单提交。您有错误检查，但您没有告诉浏览器不要实际提交表单。因此它会提交，并且由于您没有任何操作，它会 return 到您网站的初始页面。您需要通过使用 e.preventDefault(); 来防止表单处理程序中的默认行为；（确保将 e 定义为事件参数）或 return false.

好的，一般来说，您可以像这样收听表单 post（假设您对表单标签执行 id="mainForm"）：

$("#mainForm").on("submit", function(e) {
    e.preventDefault(); //dont let the form submit
    //this is where you do stuff like, check the form, and then possibly POST it via XHR
    //when done, you have to do something, like alert('dude im done!') or use
    // jQM's changePage API to go to a 'done' type page
}

jQuery 移动 - 提交表单时切换页面

jQuery mobile - switches pages when I submit form

jquery

forms

jquery-mobile

jquery-plugins

jquery-forms-plugin

Html