Ошибки проверки формы 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 заставит его также правильно отформатировать электронную почту.

Вот ссылка на первый результат поиска по валидации HTML 5 форм: 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 возникли проблемы с тире, поместите идентификатор элемента в кавычки внутри скобок. Кроме того, идентификатор формы является регистрацией не валидацией.

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>