Question

我使用javascript验证在表单发送到数据库之前检查每个表单字段中的值但是当我单击提交时，表单仍然发送甚至没有任何值。为了测试它，我点击了每个字段以清除它们，然后尝试提交按钮

此处为表格

 <form method="post" action="send.php" id="theform" name="theform">
<input type="text" name="firstname" id="firstname" value="First Name" onFocus="this.value=''" class="yourinfo" ><br/>
<input type="text" name="lastname" id="lastname" value="Last Name" onFocus="this.value=''" class="yourinfo"><br/>
<input type="text" name="email" id="email" value="Email Address" onFocus="this.value=''" class="yourinfo"><br/>
<div id="datepicker"></div>
<input type="hidden" name="date" id="date">
<input type="image" src="images/sbmit-button.png" name="submit" height="49" width="190" id="submit" value="submit" style="margin-top:10px; margin-left:-2px;" >
</form>

继承人javascript

$(document).ready(function(){
// Place ID's of all required fields here.
required = ["firstname", "lastname", "email"];
// 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.";

$("#theform").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;
    }
});

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

我还链接到jquery文件：

 <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>

我自己对它进行了测试，看起来似乎有效，但似乎有些事情已经超过了它并跳过了本页的验证

=============================================== ===================================

我仍然没有工作...基本上你认为它可能与jquery UI datepicker有关，我也在使用表单？我没有在表单验证中包含它，因为我只想确保填写名字，姓氏和电子邮件

我已将此包含在我的表单页面中：

<script>
        $(function() {
$("#datepicker").datepicker({
    altField: '#date'
});

$('#submit').click(function() {
    $('#output').html($('form').serialize());
});
});
</script>

即使字段中没有值，

会产生提交效果吗？

某些东西是definatley覆盖验证并提交它

Answer 1

It's working for me!（但可能不会像你想象的那样应该）

输入有效的电子邮件后，如果您点击submit，则会发送表单。为什么？因为您已为用户填写firstname和lastname - 字符串First Name和Last Name ！

因此，您不应只检查空名或填充的姓名和错误字符串，但如果名字是First Name或姓氏是Last Name，您也应该触发错误。< / p>

// Check for empty value, the error string 
//     OR the default values of "First Name" and "Last Name"

if ((input.val() == "") || 
    (input.val() == emptyerror) || 
    (input.val() == "First Name") || 
    (input.val() == "Last Name")) {

    input.addClass("needsfilled");

Working example

（我假设您使用服务器端验证作为最终检查，因为像我这样的人只喜欢NoScript。）

（你还要在代码顶部声明5个全局变量，在for循环中声明一个全局变量（i）...不要忘记var ..就像你用过的那样input）

Answer 2

如果我禁用JavaScript怎么办？你应该（也）在服务器端进行验证。

同样重构您的代码！您可以从提取方法开始。

Answer 3

您需要取消提交活动。看起来你试图用return false或return true来做这件事。但是，使用jQuery，你需要采用稍微不同的方式。

首先，您需要为JavaScript事件设置参数名称。我通常使用e。

$("#theform").submit(function(e){

然后您需要更新以下代码：

//if any inputs on the page have the class 'needsfilled' the form will not submit
if ($(":input").hasClass("needsfilled")) {
    e.preventDefault();
} else {
    errornotice.hide();
}

e.preventDefault（）会停止处理事件。在这种情况下，这意味着不会提交表格。

表格经过验证但仍然没有提交价值？

3 个答案: