フォームの検証が正しく機能しないのはなぜですか？

私はプロジェクトのためのフォームを作成していますので、名前に何も入力しなければ "名前を記入する必要がある"というアラートが表示されるので、これはおそらく愚かです新人の間違いですが、私はなぜそれが私はJavaScriptに新しいですように動作していないのか分からない。フォームの検証が正しく機能しないのはなぜですか？

私はCSSを不要にしていません。私はまだ何かに情報を投稿していない。

<head> 
 
<script> 
 
function validateForm() { 
 
    var x = document.forms["myForm"]["fname"].value; 
 
    if (x == "") { 
 
     alert("Name must be filled out"); 
 
     return false; 
 
\t \t </script> 
 
</head>

<body> 
 
<div class="form_settings"> 
 
      <form name="MyForm" onSubmit="return validateForm()" 
 
method="post"> 
 
      <p><span>Name</span><input class="contact" type="text" 
 
    name="fname" value="" /></p> 
 
      <p><span>Email Address</span><input class="contact" type="text" 
 
    name="your_email" value="" /></p> 
 
      <p><span>Re type Email Address</span><input class="contact" 
 
type="text" name="your_email" value="" /></p> 
 
      <p><span>Message</span><textarea class="contact textarea" 
 
rows="8" cols="50" name="your_enquiry"></textarea></p> 
 
      <p style="padding-top: 15px"><span>&nbsp;</span><input 
 
class="submit" type="submit" name="contact_submitted" value="Submit" /></p> 
 
      </form> 
 

 
</body>

出典

2017-04-21 Will Mannix

構文は完全に間違っているし。ブラウザのコンソールをチェックアウトします。 – SaidbakR

閉じ括弧がない2つの構文エラーがあります。また、名前は大文字と小文字が区別されるので、 'document.forms [" MyForm "] ...'。 – RobG

このお試しください：

function validateForm() { 
 
    var x = document.getElementsByClassName("contact")[0].value; 
 
    if (x == "") { 
 
     alert("Name must be filled out"); 
 
    } 
 

 
    return false; 
 
}

<form name="MyForm" onsubmit="validateForm();"> 
 
     <p><span>Name</span> 
 
      <input class="contact" type="text" name="fname" value="" /> 
 
     </p> 
 
     <p><span>Name</span><input class="contact" type="text" name="fname" value="" /></p> 
 
     <p><span>Email Address</span><input class="contact" type="text" name="your_email" value="" /></p> 
 

 
     <p><span>Re type Email Address</span><input class="contact" type="text" name="your_email" value="" /></p> 
 

 
     <p><span>Message</span><textarea class="contact textarea" rows="8" cols="50" name="your_enquiry"></textarea></p> 
 

 
     <p style="padding-top: 15px"><span>&nbsp;</span> 
 
      <input class="submit" type="submit" value="submit" /> 
 
     </p> 
 
    </form>

出典

2017-04-21 01:28:14

フォームの検証が正しく機能しないのはなぜですか？

答えて

関連する問題