JavaScriptフォーム検証エラー

Question

javascriptを使用して登録フォームをセットアップして、ユーザーが各入力フィールドに何かを入力したかどうかを確認しようとしています。私は、送信ボタンをクリックすると今のところ、何も起こりません。:(

<form name="registration" id="registration"> 
       <label class="registration-spacing"> 
        <input id="first-name-registration" type="text" name="first-name-registration" placeholder="First Name" size="35"> 
       </label> 
       <label class="registration-spacing"> 
        <input id="last-name-registration" type="text" name="last-name-registration" placeholder="Last Name" size="35"> 
       </label> 
       <label class="registration-spacing"> 
        <input id="date-of-birth-registration" type="text" name="date-of-birth-registration" placeholder="Date of Birth" size="35"> 
       </label> 
       <label class="registration-spacing"> 
        <input id="email-registration" type="text" name="email-registration" placeholder="Email" size="35"> 
       </label> 
       <label class="registration-spacing"> 
        <input id="username-registration" type="text" name="username-registration" placeholder="Username" size="35"> 
       </label> 
       <label class="registration-spacing"> 
        <input id="password-registration" type="password" name="password-registration" placeholder="Password" size="35"> 
       </label> 
       <label class="registration-spacing"> 
        <button type="button" id="submit-registration" onclick="registrationValidation()">Submit</button> 
       </label> 
      </form> 

function registrationValidation() { 
     var fName = document.forms["vaidation"].first-name-registration.value; 
     var lName = document.forms["validation"].last-name-registration.value; 
     var dob = document.forms["validation"].date-of-birth-registration.value; 
     var email = document.forms["validation"].email-registration.value; 
     var username = document.forms["validation"].username-registration.value; 
     var password = document.forms["validation"].password-registration.value; 

     if(fName == "" || lName == "" || dob == "" || email == "" || username == "" || password == "") { 
      alert("Please fill out all required fields."); 
      return false; 
     } else { 
      window.location = "file:///E:/Program Files/eclipse/Workspace/Overrated/WEB-INF/homepage.html"; 
      alert("Registration Successful!"); 
     } 
    } 

Answer 1

私はこのプラグインを使用することをお勧めします。http://jqueryvalidation.org/私はまた、あなたがjQueryのを使用をお勧めします。

使用方法は超簡単であり、私はそれを使用しますフォームのためのすべての時間。

これ以下のコードは正常に動作します。

あなたは電子メールがDOBは名前が有効であることを、有効であることを、有効であることを検証していませんが（なしnumbers..ect。）各テキストボックスにランダムなものを入れて登録することができます。

HTML5内蔵のバリデータを使用すると、より近づくことができます。 Ex <input type="email" name="email" required placeholder="Enter a valid email address">必須属性に注目してください。また、type属性は、適切にフォーマットされた電子メールであることを強制します。 http://www.the-art-of-web.com/html/html5-form-validation/

<!-- jQuery --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 

<form name="registration" id="registration"> 
    <label class="registration-spacing"> 
     <input id="first-name-registration" type="text" name="first-name-registration" placeholder="First Name" size="35"> 
    </label> 
    <label class="registration-spacing"> 
     <input id="last-name-registration" type="text" name="last-name-registration" placeholder="Last Name" size="35"> 
    </label> 
    <label class="registration-spacing"> 
     <input id="date-of-birth-registration" type="text" name="date-of-birth-registration" placeholder="Date of Birth" size="35"> 
    </label> 
    <label class="registration-spacing"> 
     <input id="email-registration" type="text" name="email-registration" placeholder="Email" size="35"> 
    </label> 
    <label class="registration-spacing"> 
     <input id="username-registration" type="text" name="username-registration" placeholder="Username" size="35"> 
    </label> 
    <label class="registration-spacing"> 
     <input id="password-registration" type="password" name="password-registration" placeholder="Password" size="35"> 
    </label> 
    <label class="registration-spacing"> 
     <button type="button" id="submit-registration" onclick="registrationValidation()">Submit</button> 
    </label> 
</form> 


<script> 
    function registrationValidation() { 
     var fName = $("#first-name-registration").val(); 
     var lName = $("#last-name-registration").val(); 
     var dob = $("#date-of-birth-registration").val(); 
     var email = $("#email-registration").val(); 
     var username = $("#username-registration").val(); 
     var password = $("#password-registration").val(); 

     if(fName == "" || lName == "" || dob == "" || email == "" || username == "" || password == "") { 
      alert("Please fill out all required fields."); 
      return false; 
     } else { 
      window.location = "file:///E:/Program Files/eclipse/Workspace/Overrated/WEB-INF/homepage.html"; 
      alert("Registration Successful!"); 
     } 
    } 
</script> 

Answer 2

入力値を取得するには、これを使用してみてください：

var fName = document.getElementById('first-name-registration').value; 

Answer 3

によりJavaScriptにとの問題を抱えてここ

はHTML 5フォームの検証上の最初の検索結果へのリンクがあります要素のidを大括弧の中に引用符で囲みます。また、フォームIDは登録ではなく検証です。

function registrationValidation() { 
 
     var fName = document.forms["registration"]["first-name-registration"].value; 
 
     var lName = document.forms["registration"]["last-name-registration"].value; 
 
     var dob = document.forms["registration"]["date-of-birth-registration"].value; 
 
     var email = document.forms["registration"]["email-registration"].value; 
 
     var username = document.forms["registration"]["username-registration"].value; 
 
     var password = document.forms["registration"]["password-registration"].value; 
 

 
     if(fName == "" || lName == "" || dob == "" || email == "" || username == "" || password == "") { 
 
      alert("Please fill out all required fields."); 
 
      return false; 
 
     } else { 
 
      window.location = "file:///E:/Program Files/eclipse/Workspace/Overrated/WEB-INF/homepage.html"; 
 
      alert("Registration Successful!"); 
 
     } 
 
    }

<form name="registration" id="registration"> 
 
       <label class="registration-spacing"> 
 
       </label> 
 
        <input id="first-name-registration" type="text" name="first-name-registration" placeholder="First Name" size="35"> 
 
       <label class="registration-spacing"> 
 
        <input id="last-name-registration" type="text" name="last-name-registration" placeholder="Last Name" size="35"> 
 
       </label> 
 
       <label class="registration-spacing"> 
 
        <input id="date-of-birth-registration" type="text" name="date-of-birth-registration" placeholder="Date of Birth" size="35"> 
 
       </label> 
 
       <label class="registration-spacing"> 
 
        <input id="email-registration" type="text" name="email-registration" placeholder="Email" size="35"> 
 
       </label> 
 
       <label class="registration-spacing"> 
 
        <input id="username-registration" type="text" name="username-registration" placeholder="Username" size="35"> 
 
       </label> 
 
       <label class="registration-spacing"> 
 
        <input id="password-registration" type="password" name="password-registration" placeholder="Password" size="35"> 
 
       </label> 
 
       <label class="registration-spacing"> 
 
        <button type="button" id="submit-registration" onclick="registrationValidation()">Submit</button> 
 
       </label> 
 
      </form>