AJAX表单提交问题
AJAX form submission issue
以下代码是我的注册页面的HTML标记和JS部分。我不知道什么是错的,但是,当我留下所有的文本输入未填写,并单击提交按钮的第一次,它验证并给出错误消息。但是当第二次点击时,它直接将所有数据发送到php文件。请看看我的js文件(P.S.不要注意验证错误消息:))
HTML标记看起来像这样
<form id="signup_form" action="core/code/PHP/registration/signup.php" method="post">
...
</form>
和js部分
var emailReg = /^(['w-'.]+@(['w-]+'.)+['w-]{2,4})?$/,
fname, mname, lname, email, pass, confirm_pass;
/*VALIDATION*/
/*check if input fields empty or not*/
function vPass1() {
var isValid = true;
if (!fname) {
$("#fname").attr('class', 'invalid');
isValid = false;
}
if (!lname) {
$("#lname").attr('class', 'invalid');
isValid = false;
}
if (!mname) {
$("#mname").attr('class', 'invalid');
isValid = false;
}
if (!email) {
$("#email").attr('class', 'invalid');
isValid = false;
}
if (!pass) {
$("#pass").attr('class', 'invalid');
isValid = false;
}
if (!confirm_pass) {
$("#confirm_pass").attr('class', 'invalid');
isValid = false;
}
return isValid;
}
/*Validation start*/
/*check names, email, password confirmation*/
function validatePassword(pw, options) {
// default options (allows any password)
var o = {
lower: 2,
upper: 0,
alpha: 0,
/* lower + upper */
numeric: 1,
special: 0,
length: [0, Infinity],
custom: [ /* regexes and/or functions */ ],
badWords: [],
badSequenceLength: 0,
noQwertySequences: false,
noSequential: false
};
for (var property in options)
o[property] = options[property];
var re = {
lower: /[a-z]/g,
upper: /[A-Z]/g,
alpha: /[A-Z]/gi,
numeric: /[0-9]/g,
special: /['W_]/g
},
rule, i;
// enforce min/max length
if (pw.length < o.length[0] || pw.length > o.length[1]) return false;
// enforce lower/upper/alpha/numeric/special rules
for (rule in re) {
if ((pw.match(re[rule]) || []).length < o[rule]) return false;
}
// enforce word ban (case insensitive)
for (i = 0; i < o.badWords.length; i++) {
if (pw.toLowerCase().indexOf(o.badWords[i].toLowerCase()) > -1) return false;
}
// enforce the no sequential, identical characters rule
if (o.noSequential && /(['S's])'1/.test(pw)) return false;
// enforce alphanumeric/qwerty sequence ban rules
if (o.badSequenceLength) {
var lower = "abcdefghijklmnopqrstuvwxyz",
upper = lower.toUpperCase(),
numbers = "0123456789",
qwerty = "qwertyuiopasdfghjklzxcvbnm",
start = o.badSequenceLength - 1,
seq = "_" + pw.slice(0, start);
for (i = start; i < pw.length; i++) {
seq = seq.slice(1) + pw.charAt(i);
if (
lower.indexOf(seq) > -1 || upper.indexOf(seq) > -1 || numbers.indexOf(seq) > -1 || (o.noQwertySequences && qwerty.indexOf(seq) > -1)) {
return false;
}
}
}
// enforce custom regex/function rules
for (i = 0; i < o.custom.length; i++) {
rule = o.custom[i];
if (rule instanceof RegExp) {
if (!rule.test(pw)) return false;
} else if (rule instanceof Function) {
if (!rule(pw)) return false;
}
}
// great success!
return true;
}
function vPass2() {
if ($.isNumeric(fname)) {
$("#fname").attr('class', 'invalid');
$.notifyBar({
cls: "error",
html: "Ad ancaq hərflərdən ibarət olmalıdır"
});
return false;
}
if ($.isNumeric(lname)) {
$("#lname").attr('class', 'invalid');
$.notifyBar({
cls: "error",
html: "Familiya ancaq hərflərdən ibarət olmalıdır"
});
return false;
}
if ($.isNumeric(mname)) {
$("#mname").attr('class', 'invalid');
$.notifyBar({
cls: "error",
html: "Atanızın adı ancaq hərflərdən ibarət olmalıdır"
});
return false;
}
if (!emailReg.test(email)) {
$.notifyBar({
cls: "error",
html: "Email ünvanınızı düzgün daxil edin"
});
$("#email").attr('class', 'invalid');
return false;
}
if (pass != confirm_pass) {
$.notifyBar({
cls: "error",
html: "Şifrə ilə təkrar şifrə üst-üstə düşmür"
});
$("#pass").attr('class', 'invalid');
$("#confirm_pass").attr('class', 'invalid');
return false;
}
if (!validatePassword(pass)) {
$.notifyBar({
cls: "error",
html: "Şifrə minimum 2 hərif və 1 rəqəmdən ibarət olmalıdır."
});
$("#pass").attr('class', 'invalid');
$("#confirm_pass").attr('class', 'invalid');
return false;
}
return true;
}
function validate() {
if (vPass1()) {
if (vPass2()) {
return true;
}
} else {
$.notifyBar({
cls: "error",
html: "Qırmızı ilə qeyd olunan xanalara tələb olunan məlumatları daxil edin"
});
return false;
}
} /*Validation End*/
$(document).ready(function () {
$('#signup_form').get(0).reset()
$("#signup_form").submit(function (e) {
fname = $("#fname").val();
mname = $("#mname").val();
lname = $("#lname").val();
email = $("#email").val();
pass = $("#pass").val();
confirm_pass = $("#confirm_pass").val();
//check the form is not currently submitting
if ($(this).data('formstatus') !== 'submitting') {
var form = $(this),
formData = form.serialize(),
formUrl = form.attr('action'),
formMethod = form.attr('method');
//add status data to form
form.data('formstatus', 'submitting');
if (validate()) {
//send data to server for validation
$.ajax({
url: formUrl,
type: formMethod,
data: formData,
success: function (data) {
//setup variables
var responseData = jQuery.parseJSON(data),
cl, text;
//response conditional
switch (responseData.status) {
case 'error':
cl = 'error';
text = 'Qeydiyyat zamanı problem yarandı';
break;
case 'success':
cl = 'success';
text = 'Qeydiyyat uğurla başa çatdı';
break;
}
$.notifyBar({
cls: cl,
html: text
});
}
});
//prevent form from submitting
e.preventDefault();
} else {
return false
}
}
});
});
这两个插件可以为您大大简化:
- jQuery表单插件jQuery表单验证
如果您使用ajax提交表单,我强烈推荐第一个。
相关文章:
- 表单提交问题,如何在我的URL末尾获得ID的值
- ASP MVC复选框表单提交问题
- ajax表单提交的编码问题
- 在我的Javascript和HTML之间的表单提交按钮链接中遇到问题
- 使用jQuery和Ajax表单提交问题
- 联系表单和IE8问题 - 似乎无法阻止表单提交
- 阻止表单提交 预防默认问题
- ASP.NET C# 表单提交问题
- 简单的表单提交,没有页面刷新问题
- 我在停止表单提交事件时遇到问题
- Jquery/PHP-ajax表单提交问题
- JavaScript表单提交不会发生任何问题
- socket.io聊天示例-表单提交问题
- 表单提交的跨浏览器问题
- 对话框表单提交问题
- AJAX表单提交问题
- Firefox的Javascript问题:表单提交时不更新状态
- IE10下载问题有两个javascript表单提交
- Angular JS表单提交问题
- 问题与PHP表单提交与谷歌地图地理编码Lat长