表单提交错误

Posted 2023-02-24

【中文标题】表单提交错误

【英文标题】：Form submitting wrongfully

【发布时间】：2012-05-12 14:22:11

【问题描述】：

我正在使用脚本在提交表单之前验证一些表单字段。如果验证失败，脚本应该返回 false。在 linux 上，该脚本在 FF、Chrome 和 Opera 中运行良好。在 Windows 上，脚本失败，表单在 Chrome、Safari 和 IE 上提交。 您的想法将不胜感激。

$(document).ready(function()    
    // Place ID's of all required fields in the array.
    required=["formname","formemail"];
    email = $("#formemail");
    name = $("#formname");
    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.";

    $("#suggestionform").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");
             
                  
         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 ( "" == name.val())
             name.addClass("needsfilled");
             name.val(emptyerror);
         
         if( $("#link1").val() + $("#link2").val() + $("#link3").val() + $("#link4").val() +  $("#textarea1").val() + $("#textarea2").val() == "") 
             errornotice.fadeIn(750);
             alert("returning fail")
             return false;
         
         if( $(":input").hasClass("needsfilled"))
             alert("returning fail here")
             return false;
         elseerrornotice.hide();return true;      
    );   

    $(":input").focus( function()
        if ($(this).hasClass("needsfilled"))
            $(this).val("");
            $(this).removeClass("needsfilled");
        
    )    
);





Version 2
 var required=["formname","formemail"];
var email = $("#formemail");
var name = $("#formname");
var errornotice = $("#error");
// The text to show up within a field when it is incorrect
var emptyerror = "Please fill out this field.";
var emailerror = "Please enter a valid e-mail.";

function suggestionSubmit(theform)
    required=["formname","formemail"];
    email = $("#formemail");
    name = $("#formname");
    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.";    

    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");
             
                  
     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 ( "" == name.val())
         name.addClass("needsfilled");
         name.val(emptyerror);
     
     if( $("#link1").val() + $("#link2").val() + $("#link3").val() + $("#link4").val() +  $("#textarea1").val() + $("#textarea2").val() == "") 
         errornotice.fadeIn(750);
         return false
     
     if( $(":input").hasClass("needsfilled"))
         return false;
     
     elseerrornotice.hide();return true;     

【问题讨论】：

您尝试过什么解决方法？它在哪些领域失败？全部？

我尝试将警报放在脚本将返回 false 的位置，以测试是否真的看到了代码。我在代码中留下了几个。即使在提交表单后，我也会在输入字段中看到错误消息（在那里使用会话），并且淡入的错误行会出现片刻，然后提交表单。这让我觉得脚本正在做它应该做的事情，但表单仍在提交。

【参考方案1】：

你可以试试这样写

$(document).ready(function()    
// Place ID's of all required fields in the array.
required=["formname","formemail"];
email = $("#formemail");
name = $("#formname");
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.";

$("#suggestionform").submit( function(event)
     //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");
         
              
     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 ( "" == name.val())
         name.addClass("needsfilled");
         name.val(emptyerror);
     
     if( $("#link1").val() + $("#link2").val() + $("#link3").val() + $("#link4").val() +  $("#textarea1").val() + $("#textarea2").val() == "") 
         errornotice.fadeIn(750);
         alert("returning fail")
         event.preventDefault();
         return false;
     
     if( $(":input").hasClass("needsfilled"))
         alert("returning fail here")
         event.preventDefault();
         return false;
     elseerrornotice.hide();return true;      
);   

希望对你有帮助。

【讨论】：

它有帮助。但是现在表单根本没有提交。我做了 event.preventDefault();代码的第一行并将事件参数放入函数中。

对不起，我提交的示例不完整。如果您希望不提交表单，则需要使用 event.preventDefault() 。答案已更新。

我实际上是在把它放在第一行之后就试过了。有条件地使用它仍然不会阻止表单提交。打败我的是为什么它适用于某些浏览器/操作系统而不是其他浏览器/操作系统。这是提交表单的方式： 非常标准的东西。

所以你看到像“返回失败”或“返回失败”之类的警报？如果不是，则 IF 条件有问题。

没有警报，所以我尝试修改脚本运行的方式。我所做的是允许表单进行显式函数调用并将值返回给 onsubmit，如下所示： onsubmit="return functioncall(this);"现在该脚本适用于 IE、FF 和 Opera（在 windows 上），但仍然不能在 Chrome 或 safari（在 windows 上）。奇怪！请参阅原始代码下方的版本 2。