javascript - 由操作而不是 javascript 发送的表单虽然返回 false

Question

我的问题比标题中写的要深一些。让我解释一下情况。我正在构建一个用于购买产品的表单，该表单使用 JQuery通过插件FormToWizard 分步进行。此外，我使用Validate来轻松验证它，并使用可定制的效果和 ZURB 的 Reveal.js（抱歉，由于我的声誉缺失，无法发布更多链接）用于处理发生错误的好模式。

我的程序：

当网站完成加载并提交表单时，验证功能会启动，它会再次扫描整个表单。
所以我告诉 validate 如果有错误则将变量 error 设置为 true，如果没有错误则将其设置为 false。
之后它应该调用函数 send() 来处理模态和表单的发送。
它内部还有一个 return false 以防止 html 以自然方式发送它。

我的问题：

一旦函数 send 的代码变得太大，它就不能正常进行，并突然被 .php 文件打断，该文件称为表单的动作标记。
如果我减少函数 send() 中的行数，它会按应有的方式工作。但是这些额外的行非常重要。

那么我能做些什么来避免这种情况呢？

我已经尝试将这两个函数包装在一个$("#auftragsform").submit()函数中，但这也不起作用。我已经尝试了很多事情，并且想到了我所知道和可以做的所有事情，但没有找到解决方案。

这是我的代码：

$(window).load(function(){    
        $('#auftragsformular').walidate({
            submitSelector: 'input[type="submit"]',
            doIfAllIsValid: function() {
                error = false;
                send();
            },
            doIfSomethingIsInvalid: function() {
                error = true;
                send();
            }
        }); // Initalize the form
        $('#name').walidate('validate'); // Make this element required
        $('#email').walidate('validate', {
            eventHandler: 'blur keyup',
            expression: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z]{2,10})+$/,
            invalid: function() {                  
                $(this).tipTip({ delay: 100, defaultPosition: "top", activation: "focus" });
            },
        });
        $('#plz').walidate('validate');
        $('#ort').walidate('validate');
        $('#strasse').walidate('validate');
        $('#hausnr').walidate('validate');
        $('#hoehe').walidate('validate');
        $('#breite').walidate('validate');
        $('input[type=radio][name=varianten]').walidate('validate');
        $('#agb').walidate('validate');
});

function send(){
    if (error == false) {
        if (is_not_bot()) {
            var name = $("#name").val();
            var email = $("#email").val();
            var adresse = $("#uebersicht_d").text();
            var auftrag = $("#uebersicht_a").text();

            $.post('assets/scripts/php/auftragform.php', "name=" + name + "&email=" + email + "&adresse=" + adresse + "&auftrag=" + auftrag, function(msg) {
                    $("#form").slideUp(1000);
                    $("#answer").delay(1000).fadeIn(1500);
                    console.log(msg);   
            });
        }
        return false;
    }

    if (error == true) {
        $('#errorModal').reveal();
        if ($("#versteckt_variante:checked").val() == "nix") {
            $("#alert_varianten").show();
            $("#felderhardcopy").hide();
        }
        if (!$("#agb").attr("checked")) {
            $("label[for=agb]").css("color", "red");
        }
        $("#step0").show();
        $("#step1").hide();
        $("#step2").hide();
        $("#senden").hide();
        selectStep(1);
        return false;
    }
}

HTML：

<form title="Auftrag" id="auftragsformular" action="assets/scripts/php/auftragform.php" method="post" enctype="multipart/form-data">     
        <div id="formcontainer">
            <fieldset title="Kontaktdaten" id="Kontakt"> 
            <legend> Ihre Daten </legend>

                <div class="left">
                    <label for="firma"> Firma</label>
                    <p> <input type="text" name="firma" id="firma" placeholder="Ihre Firma" > </p>

                    <label for="name"> Name</label>
                    <p> <input type="text" name="name" id="name" placeholder="Ihr kompletter Name (erforderlich)"> </p>

                    <label for="email"> Email-Adresse</label> 
                    <p> <input type="text" name="email" id="email" placeholder="Ihre Email (erforderlich)">
                     <a href="#" class="tip-trigger help"><span style="top: -150px;">Eine korrekte, existierende Email-Adresse wie z.B. max.mustermann@online.de ist erforderlich! Kommas, Umlaute, Klammern und Sonderzeichen sind verboten!</span>?</a>
                    </p>

                    <label for="tel"> Telefon</label> 
                    <p> <input type="tel" name="tel" id="tel" placeholder="Ihre Telefonnummer">
                         <a href="#" class="tip-trigger"><span style="top: -110px;">Durch Ihre Telefonnummer können wir Sie schneller erreichen</span>?</a>
                    </p>
                </div>

                <div class="left">
                    <label for="plz"> Postleitzahl</label> 
                    <p> <input type="number" name="plz" id="plz" placeholder="Ihre Postleitzahl (erforderlich)"></p>

                    <label for="ort">Ort</label> 
                    <p> <input type="text" name="ort" id="ort" placeholder="Ihr Wohnort (erforderlich)"></p>

                    <label for="strasse"> Straße</label> 
                    <p> <input type="text" name="strasse" id="strasse" placeholder="Ihre Straße (erforderlich)"></p>

                    <label for="hausnr"> HausNr.</label> 
                    <p> <input type="number" name="hausnr" id="hausnr" placeholder="Ihre Hausnummer (erforderlich)"></p>
                </div>

                <div class="clear"></div>
            </fieldset>




            <fieldset title="Auftrag" id="auftrag">
            <legend> Der Auftrag </legend>

                <label for="hoehe"> Maße des Sicherungskasten(cm)</label>
                <p> <input type="number" name="hoehe" id="hoehe" placeholder="Höhe (erforderlich)"> </p>
                <p style=""> <input type="number" name="breite" id="breite" placeholder="Breite (erforderlich)"></p>


                <div style="position: relative">
                    <label> Wählen Sie die Art des Auftrags </label><p></p>
                    <div class="left radio">
                        <label for="vorlage"> <img src="assets/images/cupcake.jpg" height="200px"/><br/> Motiv aus den Vorlagen auswählen</label> <br/>
                        <input type="radio" class="radio" name="varianten" id="vorlage" value="ausgewählte Vorlage" style="display:none;">
                    </div>
                    <div class="left radio">
                        <label for="digital"> <img src="assets/images/placeholder.png" height="200px"/><br/> Ein Bild hochladen</label> <br/>
                        <input type="radio" class="radio" name="varianten" id="digital" value="ein digitales Bild hochladen" style="display:none;">
                    </div>
                    <div class="left radio">
                        <label for="hardcopy"> <img src="assets/images/hardcopy.jpg" height="200px"/><br/> Ein gedrucktes Bild einsenden </label> <br/>
                        <input type="radio" class="radio" name="varianten" id="hardcopy" value="ein Bild einsenden" style="display:none;">
                    </div>
                    <input type="radio" class="radio" name="varianten" id="versteckt_variante" value="nix" style="display:none;">

                    <div class="clear"></div>
                    <div id="alert_varianten" class="alert"> Bitte wählen Sie eine Variante aus!</div>
                </div>

遗漏了一些部分，因为表格太大了。如果它们似乎很重要，我认为它们并不重要，因为它们只是无关领域，我会发布它们。

        <p> <input type="checkbox" id="agb" name="agb" value="agb" style="width: auto;"> <label for="agb">Um einen Auftrag abzuschicken müssen Sie die <a href="../agb">AGB</a> akzeptieren</label></p>

    </fieldset>

    <p class="nosee">
      <label for="your_email">This isn´t requested, just a robot detection field:</label>
      <input id="your_email" name="your_email" size="60" value="" />
    </p>

    <input type="submit" value="Abschicken" id="senden" class="buttonwichtig">

</div>
</form>

score 0 · Accepted Answer

问题解决了我刚刚使用了一个“假”按钮并将所有功能连接到它，因此只有表单的操作保留用于真正的提交按钮。我已经使用 JQuery 隐藏/显示按钮，因此任何关闭 javascript 的人都可以看到真正的提交按钮，该按钮以 php 脚本的形式提供

score 0 · Accepted Answer

与其尝试使用全局变量，不如这样：

$(window).load(function(){    
    $('#auftragsformular').walidate({
        submitSelector: 'input[type="submit"]',
        doIfAllIsValid: function() {
            return send(false);
        },
        doIfSomethingIsInvalid: function() {
            return send(true);
        }
    });
    // ...
    // Code removed for brevity
});

function send(error) {
    if (!error) {
        if (is_not_bot()) {
            var name = $("#name").val();
            var email = $("#email").val();
            var adresse = $("#uebersicht_d").text();
            var auftrag = $("#uebersicht_a").text();

            $.post('assets/scripts/php/auftragform.php', "name=" + name + "&email=" + email + "&adresse=" + adresse + "&auftrag=" + auftrag, function(msg) {
                $("#form").slideUp(1000);
                $("#answer").delay(1000).fadeIn(1500);
                console.log(msg);   
            });
        }
    } else {
        $('#errorModal').reveal();
        if ($("#versteckt_variante:checked").val() == "nix") {
            $("#alert_varianten").show();
            $("#felderhardcopy").hide();
        }
        if (!$("#agb").attr("checked")) {
            $("label[for=agb]").css("color", "red");
        }
        $("#step0").show();
        $("#step1, #step2, #senden").hide();
        selectStep(1);
    }
    return false;
}

javascript - 由操作而不是 javascript 发送的表单虽然返回 false

2 回答 2

Related

Reference