0

我正在尝试从 Joren Rapini 的博客中为这段代码添加更多功能，它是一个简单的表单验证器。由于项目的性质，我没有太多的权限来测试任何真正的 AJAX 提交或刷新页面功能。所以我正在尝试使用验证代码，但此外，一旦填写了所有必填字段，并且提交按钮通过其返回设置为 true 变为“活动”，我想 a) 隐藏表单容器 div 和 b ) 显示以前隐藏的 div。

所以我们有这个：

$(document).ready(function(){
// Place ID's of all required fields here.
required = ["first_name", "last_name", "email", "street_address"];
// If using an ID other than #email or #error then replace it here
email = $("#email");
errornotice = $("#error");
// The text to show up within a field when it is incorrect
emptyerror = "Please fill out this field.";
emailerror = "Please enter a valid e-mail.";

$("#unique-form").submit(function(){    
    //Validate required fields
    for (i=0;i<required.length;i++) {
        var input = $('#'+required[i]);
        if ((input.val() == "") || (input.val() == emptyerror)) {
            input.addClass("needsfilled");
            input.val(emptyerror);
            errornotice.fadeIn(750);
        } else {
            input.removeClass("needsfilled");
        }
    }
    // Validate the e-mail.
    if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
        email.addClass("needsfilled");
        email.val(emailerror);
    }

    //if any inputs on the page have the class 'needsfilled' the form will not submit
    if ($(":input").hasClass("needsfilled")) {
        return false;
    } else {
        errornotice.hide();
        return true;
    $("#placeHolder #myForm").hide();
    $("#placeHolder #stuff").show();
    }
});

// Clears any fields in the form when the user clicks on them
$(":input").focus(function(){       
   if ($(this).hasClass("needsfilled") ) {
        $(this).val("");
        $(this).removeClass("needsfilled");
   }
}); });

我的代码是这样的：

$("#placeHolder #myForm").hide();
    $("#placeHolder #stuff").show();

这行不通。我试图在#stuff div 中隐藏感谢消息和一些社交媒体链接，以在提交表单时复制感谢页面的 AJAX 加载。但是我受限于客户端，我没有能力对服务器进行大量的来回测试，我正在尝试为此安装一个非常简单的前端解决方案。验证部分似乎可以根据需要工作，并且我在代码中的所有 div id 都是正确的，所以我知道这是我还没有得到的事件处理结构中的一些概念，而且我有一个截止日期接近所以如果有人有任何想法，我会寻求帮助。

我知道我在结构或语法中遗漏了一些东西，但不确定它是什么。我需要编写一个单独的函数然后调用它吗？提前致谢。

更新： 为了清楚起见，我正在重新发布我正在使用的代码的精简版本。我试图隐藏表单的包含元素（我用于包含元素的 id 实际上是“#form-holder”，最初隐藏的 div 是“#thank-you”。我的问题不在于选择器，它在 javascript/jQuery 逻辑中（嗯，这是我不理解的逻辑:) - 或者它也可能是由于单击表单提交按钮的继承逻辑。正如我在评论中所说，我看到隐藏的 div最简短的时刻，然后它恢复为无显示。现在这是希腊文本，只是为了让它工作，最终将是带有 Twitter 链接等的“谢谢”文本消息 - 但我只需要了解逻辑正确并首先发挥作用。 

                $(document).ready(function(){
// Place ID's of all required fields here.
required = ["email"];
// If using an ID other than #email or #error then replace it here
email = $("#email");
errornotice = $("#error");
formholder = $('#form-holder');
thankyou = $("#thank-you");
// The text to show up within a field when it is incorrect
emptyerror = "Please fill out this field.";
emailerror = "Please enter a valid e-mail.";

$("#myForm").submit(function(){ 
    //Validate required fields
    for (i=0;i<required.length;i++) {
        var input = $('#'+required[i]);
        if ((input.val() == "") || (input.val() == emptyerror)) {
            input.addClass("needsfilled");
            input.val(emptyerror);
            errornotice.fadeIn(750);
        } else {
            input.removeClass("needsfilled");
        }
    }
    // Validate the e-mail.
    if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
        email.addClass("needsfilled");
        email.val(emailerror);
    }

    //if any inputs on the page have the class 'needsfilled' the form will not submit
    if ($(":input").hasClass("needsfilled")) {
        return false;
    } else {
        errornotice.hide();
        formholder.hide();
        thankyou.show();
        return true;
    }
});

// Clears any fields in the form when the user clicks on them
$(":input").focus(function(){       
   if ($(this).hasClass("needsfilled") ) {
        $(this).val("");
        $(this).removeClass("needsfilled");
   }
});});</script>

你可以看到我在代码顶部附近添加了我的表单持有者和谢谢你作为变量。下面是 HTML 的一个版本。

 <div id="form-holder">
<form id="myForm" class="form">
<p class="names form-paragraph clearfix">
<span class="first_name">
<label for="name">First Name</label>
<input type="text" required="required" name="first_name" id="first_name" /></span>
<span class="last_name">
<label for="name">Last Name</label>
<input type="text" required="required" name="last_name" id="last_name" /></span>
</p>
<p class="email form-paragraph">
<label for="email">Email*</label>
<input type="text" required="required" name="email" id="email" />
</p><p id="error">There were errors on the form, please make sure all fields are fill out correctly.</p>
<p class="small-text">* Required Field</p>
<p class="submit"><span><input type="submit" value="SUBMIT" id="formSubmit" /></span>
<span><button type="reset" value="RESET">RESET</button></span></p></form>
<div id="thank-you"><p>At vero eos et accusamus et iusto odio dignissimos ducimus qui    blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p></div>
4

2 回答 2

0

没有仔细查看该代码，但是您在 return true 语句之后添加了两行代码，因此该函数将在您的代码运行之前终止并返回 true，因此您编写的内容并不重要，它永远不会被执行。

你需要在 return 语句之前将你的代码提升一个档次，然后它可能会起作用，如果代码是正确的，这是不可能的，因为我们不知道标记，也不能说太多您选择的选择器。

if ($(":input").hasClass("needsfilled")) {
    return false;
} else {
    errornotice.hide();
    //the below seems like strange selectors, they could be valid, 
    //but just using the latter would suffice as they are ID's
    $("#placeHolder #myForm").hide(); 
    $("#placeHolder #stuff").show();
    return true;
}
于 2012-04-23T22:26:50.840 回答
0

根据大家的评论，以及来自 Adeneo 的最终评论，我开始意识到，按照最初计划的方式实现我想要做的事情是不可能的。所以我目前正在尝试一个非常简单的 AJAX 验证/提交，基于 Nettuts+ 上的教程，在这里（并保持我的手指交叉）： http: //net.tutsplus.com/tutorials/javascript-ajax/submit-a-form -无页面刷新使用 jquery/

来自阿德尼奥：

不，它不会在使用 preventDefault() 时使用默认操作提交表单，为此您必须使用 Ajax 提交，否则提交表单时站点将始终刷新，所以是的，只有停止的解决方案从刷新页面是使用ajax。

感谢大家的帮助。

于 2012-04-25T01:03:36.473 回答