为什么我的jQuery / Javascript函数没有被onsubmit正确调用?

时间:2013-08-25 09:24:48

标签: javascript jquery forms csv onsubmit

我有这个jQuery函数正在使用另一个名为html5csv.js的jQuery库(它解释了你将看到的一些CSV内容)

就是这样:

function validateNewQuiz()
{
    CSV.begin("#upload_csv").go(function(e,D)
    { 
        if (e) 
        {
            return console.log(e); 
            alert("Sorry, an error occured");
        }

        var s = "";


        for (var i = 0; i <= D.rows.length - 1; i++) 
        {
            s +=D.rows[i].join(',');
            s += "\n";
        }

        var fullString = s;

        if(/^(([^,]+,){4}[^,]+\n){3}$/.test(fullString))
        {
            return true;
        }
        else
        {
            return false;
        }

    });
}

以下是我尝试从我的表单中的onsubmit调用我的函数的方法:

<form method="post" action="createplay.php" onsubmit="return validateNewQuiz();" enctype="multipart/form-data">

我的功能已经过彻底测试,以及我的正则表达式,以确保它正常工作。当我决定将它实现到我的大文档中并将其包裹在function validateNewQuiz(){ //my function here }时,它就停止了工作。

我没有使用表单中的onsubmit部分进行测试。

我尝试了两种方法。一种方法是这样,将它们分成两个功能:

var fullString = "";
CSV.begin("#upload_csv").go(function(e,D)
{ 
    if (e) 
    {
        return console.log(e); 
        alert("Sorry, an error occured");
    }

    var s = "";


    for (var i = 0; i <= D.rows.length - 1; i++) 
    {
        s +=D.rows[i].join(',');
        s += "\n";
    }

    fullString = s;
});


function validateNewQuiz()
{
    if(/^(([^,]+,){4}[^,]+\n){3}$/.test(fullString))
    {
        return true;
    }
    else
    {
        return false;
    }
}

第二种方法是在CSV部分之外添加return

var fullString = "";
function validateNewQuiz()
{
    CSV.begin("#upload_csv").go(function(e,D)
    { 
        if (e) 
        {
            return console.log(e); 
            alert("Sorry, an error occured");
        }

        var s = "";


        for (var i = 0; i <= D.rows.length - 1; i++) 
        {
            s +=D.rows[i].join(',');
            s += "\n";
        }

        fullString = s;
    });

    if(/^(([^,]+,){4}[^,]+\n){3}$/.test(fullString))
    {
        return true;
    }
    else
    {
        return false;
    }
}

是否有人对我的表单始终提交的原因有任何建议,即使我的函数应该返回false

这是我尝试制作的另一个编辑,虽然它仍在提交给我的PHP并且由于该页面正在提交给PHP而没有显示console消息,因此重新加载

jQuery("#newQuizID").click(function(e)
{
    e.preventDefault();

    CSV.begin("#upload_csv").go(function(e,D)
    { 
        if (e) 
        {
            return console.log(e); 
            alert("Sorry, an error occured");
        }

        var s = "";


        for (var i = 0; i <= D.rows.length - 1; i++) 
        {
            s +=D.rows[i].join(',');
            s += "\n";
        }

        var fullString = s;

        if(/^(([^,]+,){4}[^,]+\n){3}$/.test(fullString))
        {
            console.log("Working");
            jQuery("#form-step2").submit();
        }
        else
        {
            console.log("Not Working");
        }

    });
});

1 个答案:

答案 0 :(得分:1)

html5csv在文件输入上放置一个事件处理程序,因此它只在添加文件时触发,因此您需要在某处设置有效标记,然后在提交之前进行检查

function checkValidCSV(e) {
    var isValid = jQuery("#form-step2").data("hasValidData");
    if( typeof(isValid) != "undefined" && isValid ) {
        jQuery("#form-step2").submit();
    } else {
        //Do whatever invalid data cals you want to do here
        alert("csv file was invalide so i am not submitting the form");
        e.preventDefault();
    }
}

function csvFileLoaded(e,D) {
    if (e) {
        return console.log(e); 
        alert("Sorry, an error occured");
    }

    var s = "";
    for (var i = 0; i <= D.rows.length - 1; i++) {
        s +=D.rows[i].join(',');
        s += "\n";
    }
    var fullString = s;
    if(/^(([^,]+,){4}[^,]+\n){3}$/.test(fullString)){
        console.log("Valid Data");
        jQuery("#form-step2").data("hasValidData",true);
    } else {
        console.log("Invalid Data");
        jQuery("#form-step2").data("hasValidData",false);
    }
}

jQuery(document).ready(function() {
    CSV.begin("#upload_csv").go(csvFileLoaded);
    jQuery("#newQuizID").click(checkValidCSV);
});