![](/img/trans.png)
[英]prevent default occurring on wrong element and mouseleave/mouseout give inconsistent response
[英]Prevent default action occurring? (JQueryMobile)
我刚刚实施了输入字段验证,例如,如果输入字段为空,则“请输入您的姓名”。
我通过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;
}
});
userRegister函数
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" );
}
我删除了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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.