javascript - 防止默认操作发生？ (JQuery移动)

Question

我刚刚实现了输入字段验证，例如如果输入字段留空，“请输入您的姓名”。

我通过 JQuery mobile 完成了此操作，但是我没有遇到的问题是，当用户提交 (registerUser(); ) 表单时，验证不会及时发生(如果留空)，而是将数据提交到数据库。

如果存在空字段，如何阻止页面加载并解析数据到数据库中？

HTML -

<form id="form1">
        <div data-role="fieldcontainer">
            <label for="txtusername" data-theme="d">Username:</label>
            <input type="text" id="txtusername" name="txtusername" data-theme="d" placeholder="Enter Username"/>
        </div>
        <div data-role="fieldcontainer">
            <label for="txtfirstname" data-theme="d">First Name:</label>
            <input type="text" id="txtfirstname" name="txtfirstname" data-theme="d" placeholder="Enter First Name"/>
        </div>
        <div data-role="fieldcontainer">
            <label for="txtlastname" data-theme="d">Last Name:</label>
            <input type="text" id="txtlastname" name="txtlastname" data-theme="d" placeholder="Enter Last Name"/>
        </div>
        <div data-role="fieldcontainer">
            <label for="txtemail" data-theme="d">Email:</label>
            <input type="email" id="txtemail" name="txtemail" data-theme="d" placeholder="Enter Enter Email"/>
        </div>
        <div data-role="fieldcontainer">
            <label for="txtpassword" data-theme="d">Password:</label>
            <input type="text" id="txtpassword" name="txtpassword" data-theme="d" placeholder="Enter Password"/>
        </div>
        <div data-role="fieldcontainer">
            <label for="passwordconfirm" data-theme="d">Confirm Password:</label>
            <input type="text" id="passwordconfirm" name="passwordconfirm" data-theme="d" placeholder="Confirm password"/>
        </div>
        <br>
        <input type="submit" value="Register User" onclick="return registerUser(); return false;">

JavaScript 文件 (JQuery Mobile) -

 $('#form1').validate({
                         rules: {
                            txtusername: {
                                 required: true
                             },
                             txtfirstname: {
                                 required: true
                             },
                             txtlastname: {
                                 required: true
                             },
                             txtemail: {
                                 required: true
                                     },
                             txtpassword: {
                                   required: true
                                          },
                            passwordconfirm: {
                                   required: true
                                   }
                         },
                         messages: {
                             txtusername: {
                                 required: "Please enter your Username."
                             },
                             txtfirstname: {
                                 required: "Please enter your First Name."
                             },
                             txtlastname: {
                                 required: "Please enter your Last Name."
                             },
                             txtemail: {
                                     required: "Please enter your Email."
                                          },
                             txtpassword: {
                                    required: "Please enter your Password."
                                },
                             passwordconfirm: {
                                  required: "Please enter your password again."
                                 }
                         },
                         errorPlacement: function (error, element) {
                             error.appendTo(element.parent().prev());
                         },
                         submitHandler: function (form) {
                             $(':mobile-pagecontainer').pagecontainer('change', '#success', {
                                 reload: false
                             });
                             return false;
                         }
                     });

用户注册函数

 function registerUser() {
       var Username = document.getElementById("txtusername").value;
       var Firstname = document.getElementById("txtfirstname").value;
       var Lastname = document.getElementById("txtlastname").value;
       var Email = document.getElementById("txtemail").value;
       var Password = document.getElementById("txtpassword").value;
       var Confirmpass = document.getElementById("passwordconfirm").value;

         db = window.openDatabase("SoccerEarth", "2.0", "SoccerEarthDB", 2*1024*1024);
         db.transaction(function(tx) {
          NewUser(tx, Username, Firstname, Lastname, Email, Password, Confirmpass);
          }, errorRegistration, successRegistration);
          }

          function NewUser(tx, Username, Firstname, Lastname, Email, Password, Confirmpass) {
          var _Query = ("INSERT INTO SoccerEarth(UserName, FirstName, LastName, Email, Password, CPass) values ('"+ Username +"','"+ Firstname +"','"+ Lastname +"','"+ Email +"', '"+ Password +"', '"+ Confirmpass +"')");
           alert(_Query);
           tx.executeSql(_Query);
           }
           function errorRegistration(error) {
        navigator.notification.alert(error, null, "Got an error mate", "cool");
            }
           function successRegistration() {
           navigator.notification.alert("User data has been registered", null, "Information", "ok");
             $( ":mobile-pagecontainer" ).pagecontainer( "change", "#page4" );
         }

Answer 1

我从输入按钮中删除了 onclick="return registerUser(); return false;" 并将其放置在 submitHandler 中。

为了防止我添加的表单提交。

$('#form1').submit(function(e) {
    e.preventDefault();
})

$(document).ready(function () {

    function registerUser(form) {
        var formdata = $(form).serializeArray()
        console.log(formdata);
    }

    $('#form1').submit(function (e) {
        e.preventDefault();
    }).validate({
        rules: {
            txtusername: {
                required: true
            },
            txtfirstname: {
                required: true
            },
            txtlastname: {
                required: true
            },
            txtemail: {
                required: true
            },
            txtpassword: {
                required: true
            },
            passwordconfirm: {
                required: true
            }
        },
        messages: {
            txtusername: {
                required: "Please enter your Username."
            },
            txtfirstname: {
                required: "Please enter your First Name."
            },
            txtlastname: {
                required: "Please enter your Last Name."
            },
            txtemail: {
                required: "Please enter your Email."
            },
            txtpassword: {
                required: "Please enter your Password."
            },
            passwordconfirm: {
                required: "Please enter your password again."
            }
        },
        errorPlacement: function (error, element) {
            error.appendTo(element.parent().prev());
        },
        submitHandler: function (form, user) {

            registerUser(form);
            return false;
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js
         "></script>
<form id="form1">
    <div data-role="fieldcontainer">
        <label for="txtusername" data-theme="d">Username:</label>
        <input type="text" id="txtusername" name="txtusername" data-theme="d" placeholder="Enter Username"/>
    </div>
    <div data-role="fieldcontainer">
        <label for="txtfirstname" data-theme="d">First Name:</label>
        <input type="text" id="txtfirstname" name="txtfirstname" data-theme="d" placeholder="Enter First Name"/>
    </div>
    <div data-role="fieldcontainer">
        <label for="txtlastname" data-theme="d">Last Name:</label>
        <input type="text" id="txtlastname" name="txtlastname" data-theme="d" placeholder="Enter Last Name"/>
    </div>
    <div data-role="fieldcontainer">
        <label for="txtemail" data-theme="d">Email:</label>
        <input type="email" id="txtemail" name="txtemail" data-theme="d" placeholder="Enter Enter Email"/>
    </div>
    <div data-role="fieldcontainer">
        <label for="txtpassword" data-theme="d">Password:</label>
        <input type="text" id="txtpassword" name="txtpassword" data-theme="d" placeholder="Enter Password"/>
    </div>
    <div data-role="fieldcontainer">
        <label for="passwordconfirm" data-theme="d">Confirm Password:</label>
        <input type="text" id="passwordconfirm" name="passwordconfirm" data-theme="d" placeholder="Confirm password"/>
    </div>
    <br>
    <input type="submit" value="Register User">
</form>