バリデーションを含むJavaScriptフォームを作成し、送信したときに送信されるのはどうすればいいですか？

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function validateForm() { 
    var x = document.forms["myForm"]["fname"].value; 
    if (x == null || x == "") { 
     alert("Name must be filled out"); 
     return false; 
    } 
} 
</script> 
</head> 
<body> 

<form name="myForm" action="demo_form.asp" 
onsubmit="return validateForm()" method="post"> 
Name: <input type="text" name="fname"> 
<input type="submit" value="Submit"> 
</form> 

</body> 
</html>

現在、検証でJavaScriptフォームを作成する方法を学習しています。ボタンを押すと、フォームはどこにでも送信されるわけではありません。バリデーションを含むJavaScriptフォームを作成し、送信したときに送信されるのはどうすればいいですか？

出典

2016-04-02 hithere

ここでテストしたところ、私は 'demo_form.asp'にリダイレクトされました。そしてなぜ検証のために 'pattern'タグを使わないのでしょうか？ – Filipe

属性 'pattern'を意味します:) – GillesC

あなたはあなたがそれhereについての詳細を学ぶことができEvent.preventDefault()

を使用する必要があります。イベントフローの任意の段階でpreventDefaultを呼び出すと、イベントがキャンセルされます。つまり、イベントの結果として実装によって通常行われるデフォルトのアクションは発生しません。

jsfiddle here（2つの入力ボックス）を参照してください。 <br>は、各入力ボックスを改行して改行することに注意してください。

<script> 
function validateForm(e) { 
     e.preventDefault(); 
     var x = document.forms["myForm"]["fname"].value; 
     if (x == null || x == "") { 
      alert("Name must be filled out"); 
      return false; 
     } 
    } 
</script> 

<body> 
    <form name="myForm" action="demo_form.asp" 
     onsubmit="return validateForm(event)" method="post"> 
     Name: <input type="text" name="fname"><br> 
     New TextBox: <input type="text" name="textBox"><br> 
     <input type="submit" value="Submit"> 
    </form> 
</body>

出典

2016-04-02 22:15:53

これは完全に機能しました！フォームに2番目のセクションを追加して、同じボタンで記入して提出する方法を教えてもらえますか？ – hithere

どういう意味ですか？申し訳ありませんが、私はかなりフォローしていません。 –

申し訳ありませんが、フォームに別のテキストボックスを追加するにはどうすればいいですか？おやすみなさい新品で – hithere

あなたはハンドリング機能でそれのためのパラメータを持っている場合、あなたが行うことができますので、のonclickイベントは、イベントオブジェクトを解析します：

function validateForm(evt) { 
//.preventDefault is a method of JavaScript events 
    evt.preventDefault(); 
}

だから、基本的にあなたがsubmitボタンの前または後にロジックを追加することができますクライアント側の検証を行い、検証が失敗した場合はキャンセルし、ユーザがnumptyであることを怒らせます。

出典

2016-04-02 22:17:36 kyle

バリデーションを含むJavaScriptフォームを作成し、送信したときに送信されるのはどうすればいいですか？

答えて

関連する問題