我的問題比標題中寫的要深一點。 讓我解釋一下情況。 我正在構建一個表單,用於購買使用JQuery通過插件FormToWizard分步執行的產品。此外,我正在使用Validate來驗證它很容易,並與ZURB定製的效果和Reveal.js(對不起,不能發佈更多的鏈接,因爲我失蹤的聲譽)好模態來處理髮生的錯誤。表單通過操作發送而不是javascript,但返回false
我的進展情況:當網站加載完成和 當表單提交它再次掃描整個窗體
- 的驗證功能啓動。
- 所以我告訴驗證,如果有錯誤 將變量錯誤設置爲true,並且在沒有錯誤時將其設置爲false。
- 之後它應該調用函數send()來處理 模態併發送表單。
- 它也得到了一個返回false,以防止html發送它自然的方式 。
我的問題:
- 只要函數發送的代碼變得太大,它isn't 正常進行了,突然由PHP文件 中斷叫它的動作標籤表格。
- 如果我減少函數send()中的行數,它的工作方式應該是 。但是這些額外的線是非常重要的。
那麼我能做些什麼來避免這種情況呢?
我已經試過在$("#auftragsform").submit()
函數中包裝這兩個函數,但這也沒有奏效。我嘗試了一大堆事情,並想到了我所知道的一切,並且能夠做到,但沒有找到解決方案。
Here's我的代碼:
$(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. [email protected] 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>
找到在提交時調用哪個函數,它將接收事件'作爲參數的對象,在該函數中執行'event.preventDefault()'。 – sabithpocker