Why is my jQuery function not being called correctly?

Question

I have this jQuery function that is using another jQuery library called html5csv.js (which explains some of the CSV stuff you will see)

Here is it:

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;
        }

    });
}

Here is how I am trying to call my function, from an onsubmit within my form:

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

My function has been thoroughly tested, along with my regex to make sure it was working. When I decided to implement it into my large document, and wrap it around function validateNewQuiz(){ //my function here } , it stopped working.

I did not make my tests with the onsubmit part within my form either.

Does anyone have any suggestions to why my form is always submitting, even when my function should be returning false?

Answer 1

The onsubmit event handler allows the submission to proceed if it is passed a true value by the validation function, and does not allow the submission to proceed if it receives a false value. In your case, the inner function is returning a true or false value, but this value is not being passed to the outer validateNewQuiz function, so the true/false result of the validation is not being passed to the onsubmit event handler. To fix this, just return the value of the CSV function.

function validateNewQuiz()
{
    var csvValidation = 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;
        }

    });
    return csvValidation;
}

Answer 2

You can make a button that would be calling your function:

<button onclick="validateNewQuiz()">Submit</button>

... and submitting the form once it is validated:

function validateNewQuiz()
{
    CSV.begin("#upload_csv").go(function(e,D)
    { 

        //...

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