文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >jquery -表单验证中断ajax post

问jquery -表单验证中断ajax post
EN

Stack Overflow用户
提问于 2014-12-28 14:25:20
回答 2查看 138关注 0票数 0

我有一个注册页面，我使用Ajax将数据发布到php页面。我有以下表格的验证：

代码语言：javascript
复制
firstname = $("#firstname").val();
if(firstname === '') {
    $("#error").empty().append("Please enter a first name.");
    $("#firstname").css("border-color", "#FF5454");
    return false;
}

我在Ajax文章中提交了变量，如下所示：

代码语言：javascript
复制
jQuery.ajax({
type: "POST",
url: "/includes/register_process.php",
data:'gender=' + gender + '&firstname=' + firstname + '&surname=' + surname
+ '&studentno=' + studentno + '&email=' + email + '&password=' + password
+ '&confirmpwd=' + confirmpwd,
etc etc.

我想将上面的验证更改如下：

代码语言：javascript
复制
firstname = $("#firstname").val();
if(firstname === '') {
    $("#error").empty().append("Please enter a first name.");
    $("#firstname").css("border-color", "#FF5454");
    return false;
} else {
    $("#error").hide();
    $("#firstname").css("border-color", "#4DC742");
    return true;
}

这似乎打破了Ajax帖子，因为它似乎没有将数据发布到php页面。

有人能给我一些提示吗?为什么这种变化会使Ajax的帖子不起作用呢？我是一个使用Ajax的初学者。

谢谢。

编辑1：

代码语言：javascript
复制
<script>
$(document).ready(function() {
$("#FormSubmit").click(function (event) {
event.preventDefault();

gender = $('#gender option:selected').val();
if (gender === 'null') {
    $("#error").empty().append("Please select a gender.");
    $("#gender").css("border-color", "#FF5454");
    return false;
} else {
    $("#error").hide();
    $("#gender").css("border-color", "#4DC742");
    return true;
}

firstname = $("#firstname").val();
if(firstname === '') {
    $("#error").empty().append("Please enter a first name.");
    $("#firstname").css("border-color", "#FF5454");
    return false;
}

surname = $("#surname").val();
if(surname === '') {
    $("#error").empty().append("Please enter a surname.");
    $("#surname").css("border-color", "#FF5454");
    return false;
}

studentno = $("#studentno").val();
if(studentno === '') {
    $("#error").empty().append("Please enter a student number.");
    $("#studentno").css("border-color", "#FF5454");
    return false;
}

email = $("#email").val();
if(email === '') {
    $("#error").empty().append("Please enter an e-mail address.");
    $("#email").css("border-color", "#FF5454");
    return false;
}

password = $("#password").val();
if(password === '') {
    $("#error").empty().append("Please enter a password.");
    $("#password").css("border-color", "#FF5454");
    return false;
}

if (password.length < 6) {
    $(".sad-feedback").empty().append("Passwords must be at least 6 characters long. Please try again.");
    $("#password").css("border-color", "#FF5454");
    return false;
}

confirmpwd = $("#confirmpwd").val();
if(confirmpwd === '') {
    $("#error").empty().append("Please enter a password confirmation.");
    $("#confirmpwd").css("border-color", "#FF5454");
    return false;
}

if(password != confirmpwd) {
    $(".sad-feedback").empty().append("Your password and confirmation do not match. Please try again.");
    $("#password").css("border-color", "#FF5454");
    $("#confirmpwd").css("border-color", "#FF5454");
    return false;
}

jQuery.ajax({
type: "POST",
url: "/includes/register_process.php",
data:'gender=' + gender + '&firstname=' + firstname + '&surname=' + surname + '&studentno=' + studentno + '&email=' + email + '&password=' + password + '&confirmpwd=' + confirmpwd,
success:function(response){
    $("#hide").hide();
    $("#register-button").hide();
    $("#FormSubmit").hide();
    $("#error").hide();
    $("#success").append('Thank you for your registration. You can now sign in to your account.');
    $("#success-button").show();
},
error:function (xhr, ajaxOptions, thrownError){
    $("#error").empty().append(thrownError);
}
});

});
});
</script>

编辑2：

代码语言：javascript
复制
<script>
$(document).ready(function() {
$("#FormSubmit").click(function (e) {
e.preventDefault();

var hasError = false;

gender = $('#gender option:selected').val();
if (gender === 'null') {
    $("#error").empty().append("Please select a gender.");
    $("#gender").css("border-color", "#FF5454");
    hasError  = true;
} else {
    $("#error").hide();
    $("#gender").css("border-color", "#4DC742");
    hasError  = false;
}

firstname = $("#firstname").val();
if(firstname === '') {
    $("#error").show();
    $("#error").empty().append("Please enter a first name.");
    $("#firstname").css("border-color", "#FF5454");
    hasError  = true;
} else {
    $("#error").hide();
    $("#firstname").css("border-color", "#4DC742");
    hasError  = false;
}

surname = $("#surname").val();
if(surname === '') {
    $("#error").show();
    $("#error").empty().append("Please enter a surname.");
    $("#surname").css("border-color", "#FF5454");
    hasError  = true;
} else {
    $("#error").hide();
    $("#surname").css("border-color", "#4DC742");
    hasError  = false;
}

studentno = $("#studentno").val();
if(studentno === '') {
    $("#error").show();
    $("#error").empty().append("Please enter a student number.");
    $("#studentno").css("border-color", "#FF5454");
    hasError  = true;
} else {
    $("#error").hide();
    $("#studentno").css("border-color", "#4DC742");
    hasError  = false;
}

email = $("#email").val();
if(email === '') {
    $("#error").show();
    $("#error").empty().append("Please enter an e-mail address.");
    $("#email").css("border-color", "#FF5454");
    hasError  = true;
} else {
    $("#error").hide();
    $("#email").css("border-color", "#4DC742");
    hasError  = false;
}

password = $("#password").val();
if(password === '') {
    $("#error").show();
    $("#error").empty().append("Please enter a password.");
    $("#password").css("border-color", "#FF5454");
    hasError  = true;
} else {
    $("#error").hide();
    $("#password").css("border-color", "#4DC742");
    hasError  = false;
}

if (password.length < 6) {
    $("#error").show();
    $(".sad-feedback").empty().append("Passwords must be at least 6 characters long. Please try again.");
    $("#password").css("border-color", "#FF5454");
    hasError  = true;
} else {
    $("#error").hide();
    $("#password").css("border-color", "#4DC742");
    hasError  = false;
}

confirmpwd = $("#confirmpwd").val();
if(confirmpwd === '') {
    $("#error").show();
    $("#error").empty().append("Please enter a password confirmation.");
    $("#confirmpwd").css("border-color", "#FF5454");
    hasError  = true;
} else {
    $("#error").hide();
    $("#confirmpwd").css("border-color", "#4DC742");
    hasError  = false;
}

if(password != confirmpwd) {
    $("#error").show();
    $(".sad-feedback").empty().append("Your password and confirmation do not match. Please try again.");
    $("#password").css("border-color", "#FF5454");
    $("#confirmpwd").css("border-color", "#FF5454");
    hasError  = true;
} else {
    $("#error").hide();
    $("#confirmpwd").css("border-color", "#4DC742");
    hasError  = false;
}

if(hasError == false){
jQuery.ajax({
type: "POST",
url: "http://test.student-portal.co.uk/includes/register_process.php",
data:'gender=' + gender + '&firstname=' + firstname + '&surname=' + surname + '&studentno=' + studentno + '&email=' + email + '&password=' + password + '&confirmpwd=' + confirmpwd,
success:function(response){
    $("#hide").hide();
    $("#register-button").hide();
    $("#FormSubmit").hide();
    $("#error").hide();
    $("#success").append('Thank you for your registration. You can now sign in to your account.');
    $("#success-button").show();
},
error:function (xhr, ajaxOptions, thrownError){
    $("#error").show();
    $("#error").empty().append(thrownError);
}
});
}

return true;

});
});
</script>
ajax
php
jquery
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-12-28 14:53:07

我认为这里的问题是，在第一次检查中，您正在从闭包返回。

代码语言：javascript
复制
event.preventDefault();
gender = $('#gender option:selected').val();
if (gender === 'null') {
    $("#error").empty().append("Please select a gender.");
    $("#gender").css("border-color", "#FF5454");
    return false;// no need to return 
} else {
    $("#error").hide();
    $("#gender").css("border-color", "#4DC742");
    return true;// No need to return 
}

因此，ajax调用永远不会被调用。相反，您应该设置一个布尔值，可能称为hasError或其他什么，并根据您的验证设置它的值。然后在闭包的末尾进行ajax调用或不根据hasError的值进行调用

因此，请考虑这样做。

代码语言：javascript
复制
...
event.preventDefault();
var hasError = false;
$("#error").empty();// Empty out the  errors container first
gender = $('#gender option:selected').val();
if (gender === null) {

    $("#error").append("Please select a gender.<br/>");// Changes here remove the empty
    $("#gender").css("border-color", "#FF5454");
    hasError  = true;
} else {

    $("#gender").css("border-color", "#4DC742");
    // EDIT : hasError =  false; remove this line
} ..... // All  the other validation

然后在底部

代码语言：javascript
复制
if(hasError == false){
   $("#error").hide();
   // Make the ajax call
} else {
   $("#error").show();
}

return true; // we handled the event

希望这有帮助

票数 0
EN

Stack Overflow用户

发布于 2014-12-28 14:37:38

尝尝这个

代码语言：javascript
复制
$(document).on("submit", "form", function(event)//Try to set id of the form and use it #from_id instead of form
{
    event.preventDefault();

    //now call your ajax
     jQuery.ajax({
      type: "POST",
      url: "/includes/register_process.php",
      data:'gender=' + gender + '&firstname=' + firstname + '&surname=' + surname
      + '&studentno=' + studentno + '&email=' + email + '&password=' + password
      + '&confirmpwd=' + confirmpwd,
      etc etc.

});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/27677295

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档