表单已验证，但仍未提交值

Form validated but still submitting without values?

本文关键字：提交 验证 表单      更新时间：2023-09-26

我使用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日期选择器有关，我也在使用的形式??我没有在表单验证中包含这个，因为我只想确保填写了名字，姓氏和电子邮件

我有这个包含在我的表单页:

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

如果字段中没有值，是否会产生提交的效果?

某些东西肯定会重写验证并提交它

这对我有用!(但它可能不像你想象的那样工作应该)

一旦您输入一个有效的电子邮件，如果您点击submit，则发送表单。为什么?因为您已经为用户填写了firstname和lastname—使用字符串First Name和Last Name !

所以你不应该只检查空或错误字符串填充的名字和姓氏，但你也应该触发一个错误，如果名字是First Name或姓氏是Last Name。

// 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");

工作示例

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

(还可以在代码的顶部声明5个全局变量，并在for循环中声明一个全局变量(i)…别忘了var ..就像您使用的input)

如果我禁用JavaScript会怎么样?您应该(也)在服务器端进行验证。

也重构你的代码!可以从提取方法开始。

您需要取消提交事件。看起来你试图用返回false或返回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.p preventdefault()会阻止事件被处理。在本例中，这意味着表单将不会被提交。

相关文章：