jspでonclickメソッドを呼び出す前にフォームの妥当性チェック

Question

htmlの検証を追加し、ボタンのクリック時にすべてのjsメソッドが必要です。ここでのonclickメソッドの火災は偶数フィールドが充填されていない...（それはフィールドが必要とされていることを警告を示していますが、あまりにもクリックメソッドで実行）

<form > 
    <input class="form-control" type="text" id="to" placeholder = "directed to: Admin" required> 
    <input class="form-control" type="text" id="header" placeholder = "message heading" required> 
    <textarea class="form-control" id="content" rows="3" placeholder = "message body" required></textarea> 
    <button type="submit" class="btn btn-warning" onclick="saveMessage()" >Search</button></form> 

jsの機能

function saveMessage(){ 
    var to = document.getElementById('to').value; 
      var header = document.getElementById('header').value; 
      var body = document.getElementById('content').value; 
      var xhttp = new XMLHttpRequest(); 
      xhttp.onreadystatechange= function(){ 
       if(xhttp.readyState===4 & xhttp.status===200){ 
        swal("Success!", "Submitted the message successfully!", "success"); 

       } 
      }; 
      xhttp.open("POST","addCusMessage?valto="+to+"&valheader="+header+"&valbody="+body,true); 
      xhttp.send(); 
     } 

    </script> 

Answer 1

のフォームの提出前に、「必須」属性のフィールドに値を入力する必要があります。。

フォームを送信していません。フィールドの値を読み、これらの値を使用してXMLHttpRequestを構築しています。

（唯一のヘッダフィールドのための一例）のようにあなたは、あなたのsaveMessage（）関数内のフィールドの値をテストする必要があります

if(header == "") { 
    alert("Header cannot be empty"); 
} else { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange= function(){ 
     if(xhttp.readyState===4 & xhttp.status===200){ 
       swal("Success!", "Submitted the message successfully!", "success"); 

      } 
     }; 
    xhttp.open("POST","addCusMessage?valto="+to+"&valheader="+header+"&valbody="+body,true); 
     xhttp.send(); 
} 

Answer 2

私はちょうどjs関数にバリデーションを追加し、それが問題を解決しました。ありがとう