検証に失敗した後にフォームが送信されないようにする方法。

Question

私はこのフォームに取り組んできており、障害に遭いました。検証に失敗した場合、フォームの送信を停止しようとしています。フォーム自体はformspree.ioを使用して結果を収集し、電子メールで送信します。私はすべてのjsでこれを書くように出発しました。

私は、formspreeが私が気づいていない/理解していない何かをしているので、検証の最後にfalseを返すことができないと思います。

フォーム要素がなく、検証ロジックと送信ボタンだけのコードです。あなたはフォームhereのすべてのコードを見ることができます。どんな助けやヒントや指示にも感謝します。

var app = document.createElement('form'); 
app.name = 'formIT' 
app.action = "https://formspree.io/alaw989@gmail.com" 
app.method = "POST" 

//all div elements and stuff used to build the form would be here// 

var submit = document.createElement('button'); 
submit.textContent = 'Submit' 
app.appendChild(submit) 
submit.style.cssText = "display: block; margin: 40px 0px 0px 20px; background-color: #1DA2F5; border: none; color: white; padding: 16px 32px; text-decoration: none; cursor: pointer;" 
submit.type = "submit" 
submit.value = "Send" 

submit.addEventListener('click', function() { 
    var x = emailInput.value; 
    var atpos = x.indexOf("@"); 
    var dotpos = x.lastIndexOf("."); 
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) { 
     alert("Not a valid e-mail address"); 
    } 

    var yes1 = radio1a.checked; 
    var no1 = radio1b.checked; 

    if (yes1 == "" && no1 == "") { 
    alert("Please answer question 1") 
    } 

    var yes2 = radio2a.checked; 
    var no2 = radio2b.checked; 

    if (yes2 == "" && no2 == "") { 
    alert("Please answer question 2")  
    } 

    var yes3 = radio3a.checked; 
    var no3 = radio3b.checked; 

    if (yes3 == "" && no3 == "") { 
    alert("Please answer question 3")  
    } 

    var yes4 = radio4a.checked; 
    var no4 = radio4b.checked; 

    if (yes4 == "" && no4 == "") { 
    alert("Please answer question 4")  
    } 

    var yes5 = radio5a.checked; 
    var no5 = radio5b.checked; 

    if (yes5 == "" && no5 == "") { 
    alert("Please answer question 5")  
    } 

    var yes6 = radio6a.checked; 
    var no6 = radio6b.checked; 

    if (yes6 == "" && no6 == "") { 
    alert("Please answer question 6")  
    } 

    var a = input1.value 
    var b = input2.value 
    if (a === "") { 
    alert("Missing Question 7") 
    } 
    if (b === "") { 
    alert("Missing Question 8") 
    } 

}); 

Answer 1

ご質問の際は、エラー時にスクリプトを強制終了するエラーキャッチ関数などを使用することをお勧めします。

答えをチェックアウト：Is it possible to stop JavaScript execution?

Answer 2

は、すべての

button.addEventListener('click', function() { 
    var form = document.getElementById('form-id'); 

    event.preventDefault(); 

    // validations here 

    if (validationsPassed) form.submit() 
}); 

Answer 3

まず試してみてください、あなたのラジオボタンは、イベントが真/偽ではない「」をチェックしなければならない「にチェック」。次に、2つの選択肢があります。マティアスが示唆したようにあなたは）あなたのクリックイベントで電子を追加し、e.preventDefaultを（追加することができます。

submit.addEventListener('click', function(e) { 
    e.preventDefault(); 
} 

またはあなたのformタグでフォームを検証するための機能を追加します。

<form onsubmit="validateForm();">