Question

我的问题比标题中写的要深一些。让我解释一下情况。我正在构建一个购买产品的表单，该表单使用JQuery通过插件FormToWizard分步进行。此外，我使用Validate轻松验证它，并使用可自定义的效果和ZURB的Reveal.js（遗憾的是因为我缺少声望而无法发布更多链接）以获得处理发生错误的漂亮模式。

我的进程：

验证功能在网站加载完成后启动提交表单时，它会再次扫描整个表单。
所以我告诉validate如果出现错误，将变量错误设置为true 如果没有错误，则设置为false。
之后它应该调用函数send（）来处理模态和表格的发送。
它内部也有一个返回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>

Answer 1

不是尝试使用全局变量，而是如何：

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

Answer 2

问题已解决我刚刚使用了“假”按钮并将所有功能连接到它，因此只有表单的动作仍然是真正的提交按钮。我使用JQuery来隐藏/显示按钮，这样任何关闭javascript的人都会看到真正的提交按钮，它提供了php脚本的形式

虽然返回false，但是通过操作而不是javascript发送的表单

2 个答案: