jQuery mobile - 当我提交表单时切换页面

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

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

好的，一般来说，您可以像这样收听表单帖子（假设您对表单标签执行 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
}