有没有办法阻止使用此javascript / jquery提交表单？

Question

I have searched the net, i´ve tried implementing "preventdefaults" and "return false" statements all over the place, but I can´t seem to find a way to prevent this form submitting and reloading the page. It only reloads when the form has been validated. I´m kind of a beginner, but I really tried hard achieving the script to validate a form (which has "post"-method and "#" as action), and make an ajax-call. It´sa school assignment and would be graceful towards any pointers you guys could give.

$(document).ready(function()
{
    $("#submit").click(function()
        {
            var gbname = $("#gbname")[0];
            var gbmessage = $("#gbmessage")[0];

            formFields = [gbname, gbmessage]
            var warning = false;

            for (i=0; i<formFields.length; i++)
            {
                formFields[i].style.backgroundColor = "white";
                if (formFields[i].value == "")
                {
                    formFields[i].style.backgroundColor = "red"
                    $(formFields[i]).bind("keyup", resetBgColor);
                    $(formFields[i]).bind("change", resetBgColor);
                    warning = true;
                }       
            }

            if (warning == true)
            {
                alert("Vänligen fyll i fälten korrekt!");
                return false;
            }

            else
            {
                $.post('ajax.php', {gbname: gbname, gbmessage: gbmessage},

                function(data)
                {
                    $("#successmessage").html(data);
                    $("#successmessage").hide();
                    $("#successmessage").fadeIn(1500); //Fade in error/success-meddelande

                    var comment = $("<div class='film2'><p class='names'><b>Namn:</b>" +gbname+ "</p> <p class='messages'><b>Meddelande:</b>" +gbmessage+ "</p></div>");

                    $("#kommentarer").prepend(comment);
                    clearForm();


                });

                return false;
            }

            return false;

        });

});

Answer 1

Your references to the input elements as objects and the data returned from your AJAX call were a bit muddled.

Also incorporated the suggestion of binding to the form's submit event. DEMO

$(document).ready(function () {

   function clearForm(){
        $('input.reset').each(function(){
            $(this).val('');
        });
    }

    $("form").on('submit', function () {
        alert('submitted!');
        var gbname = $("#gbname");
        var gbmessage = $("#gbmessage");

        formFields = [gbname[0], gbmessage[0]]
        var warning = false;

        for (i = 0; i < formFields.length; i++) {
            formFields[i].style.backgroundColor = "white";
            if (formFields[i].value == "") {
                formFields[i].style.backgroundColor = "red"
                $(formFields[i]).bind("keyup", resetBgColor);
                $(formFields[i]).bind("change", resetBgColor);
                warning = true;
            }
        }

        if (warning == true) {
            alert("Vänligen fyll i fälten korrekt!");
            return false;
        } else {
            var J = JSON.stringify({
                        "gbname": gbname.val(),
                        "gbmessage": gbmessage.val()
                    });
            console.log(J);
            $.ajax({
                type: "POST",
                url: '/echo/json/',
                datatype: 'json',
                data: {
                    json: J,
                    delay: 3
                },
                success: function (data) {
                    $("#successmessage").html(data);
                    $("#successmessage").hide();
                    $("#successmessage").fadeIn(1500); //Fade in error/success-meddelande

                    var comment = $("<div class='film2'><p class='names'><b>Namn:</b>" + data.gbname + "</p> <p class='messages'><b>Meddelande:</b>" + data.gbmessage + "</p></div>");

                    $("#kommentarer").prepend(comment);
                    clearForm();


                }  // end success
            }); // end ajax

            return false;
        }  // end else

        return false;

    });

});

Answer 2

I suggest using

$("form").on('submit', function (e) {
[...]
if(validationErrors) {
    alert(Errormessage);
    e.preventDefault();
}
[...]

instead of returning false . https://developer.mozilla.org/en-US/docs/DOM/event.preventDefault

In order to get it to work, you have to use the event as a parameter of your callback function.