Проверка формы не подтверждена

Question

Сегодня я хотел практиковать создание формы и ее проверку с использованием JavaScript.
Это мой код для формы:

<form id="practiseForm"> 
    <fieldset id="controls"> 
    <div> 
     <label for="fname">First Name: </label> 
     <input type="text" id="fname"> 
    </div> 
    <div> 
     <label for="lname">Last Name: </label> 
     <input type="text" id="lname"> 
    </div> 

    <div> 
     <label for="email">Email: </label> 
     <input id="email" type="text" size="40"> 
     </div> 
    <div> 
     <input type="submit" value="Submit"> 
    </div> 
    </fieldset> 

В Fiddle

Я хочу, чтобы иметь возможность проверить полную форму, которая означает, убедившись, что первое имя и последнее имя поля не являются пустыми. Если они есть, то я хочу использовать alert и, наконец, хочу, чтобы пользователи поставили действительный адрес электронной почты.

Я закончил кодирование, и по какой-то причине, когда я проверяю код, ничего не происходит, что означает, что форма не проверяется вообще. Поэтому я думаю, что я сделал какую-то ошибку, но не слишком уверен, что, может кто-то мне помочь?

Answer 1

Вы были некоторые ошибки синтаксиса + ваш onsubmit внутри функции по какой-то причине (на самом деле не нужны) - вы должны просто использовать следующую вместо:

document.getElementById("practiseForm").onsubmit = function() { 
    if(document.getElementById("fname").value.trim() === ""){ 
    alert("First Name Field Cannot Be Blank"); 
    return false; 
    } 
    if(document.getElementById("lname").value.trim() === ""){ 
    alert("Last Name Field Cannot Be Blank"); 
    return false; 
    } 
    var email = document.getElementById('email'); 
    var emailRegEx = /[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}/; 
    if (!emailRegEx.test(email.value)) { 
    alert("Invalid Email address"); 
    return false; 
    } 
} 

Заменить случайную логическую переменную с return false; каждый раз, и вы должны также trim() значения, в противном случае пустые входы с пробелами не будут соответствовать вашим пустым случаям.

jsFiddle here

Answer 2

на основе @ нулевой отвечают, но останавливая форму представляются, даже если действительный адрес электронной почты присутствует, но не первой/фамилии:

document.getElementById("practiseForm").onsubmit = function() { 
    var allowsubmit = true; 
    if(document.getElementById("fname").value.trim() === ""){ 
    alert("First Name Field Cannot Be Blank"); 
    allowsubmit = false; 
    } 
    if(document.getElementById("lname").value.trim() === ""){ 
    alert("Last Name Field Cannot Be Blank"); 
    allowsubmit = false; 
    } 
    var email = document.getElementById('email'); 
    var emailRegEx = /[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}/; 
    if (!emailRegEx.test(email.value)) { 
    alert("Invalid Email address"); 
    return false; 
    } 
    if(!allowsubmit){ 
     return false; 
    } 
} 

Там нет никакой магии в varable называется «allowubmit». Вы должны проверить и вернуть false (или event.PreventDefault()), чтобы предотвратить подачу. Другое решение может заключаться в том, чтобы вернуть false напрямую, а не устанавливать allowubmit = false - но тогда пользователю будет сообщено только первая ошибка.

JS fiddle