Проверка формы null или пробел не работает

Question

Я пытаюсь сделать форму, насколько это хорошо, за исключением того, что валидация не загорается, когда я намеренно позволяю ей пусто или помещать пробел. Я помещаю «требуемый» в HTML, который делает часть того, что я хотел, чтобы он делал. Вот Javascript функция:

function validateForm() { 
var x = document.forms["form"]["fname"].value; 
var a = document.forms["form"]["lname"].value; 
var b = document.forms["form"]["abbr"].value; 
var c = document.forms["form"]["city"].value; 
var d = document.forms["form"]["prov"].value; 
var e = document.forms["form"]["postal"].value; 
var f = document.forms["form"]["phoneNum"].value; 
var g = document.forms["form"]["cellphone"].value; 
var h = document.forms["form"]["email"].value; 
var i = document.forms["form"]["dob"].value; 

if (x == null || x == " ") { 
    document.getElementById("hidestar").hidden=false; 
    if (a == null || a == "") { 
     document.getElementById("hidelast").hidden=false; 
      if (b == null || b == "") { 
       document.getElementById("hideaddr").hidden=false; 
       if (c == null || c == "") { 
        document.getElementById("hidecity").hidden=false; 
         if (c == null || c == "") { 
          document.getElementById("hidecity").hidden=false; 
           if (d == null || d == "") { 
            document.getElementById("hideprov").hidden=false; 
             if (e == null || e == "") { 
              document.getElementById("hidepost").hidden=false; 
               if (f == null || f == "") { 
                document.getElementById("hidephone").hidden=false; 
                 if (g == null || g == "") { 
                  document.getElementById("hidecell").hidden=false; 
                  if (h == null || h == "") { 
                   document.getElementById("hideemail").hidden=false; 
                    if (i == null || i == "") { 
                     document.getElementById("hidedob").hidden=false; 

                    } 
                   } 
                  } 
               } 
             } 
           } 
         } 
       } 

    } 
    return false; 
    }   

А вот HTML-

<form name="form" action="form.php" method="POST" onsubmit="return validateForm()"> 

      <font color="red" id="hidestar" hidden=true>*</font>Name: <input type="text" name="fname" required> 
      <font color="red" id="hidelast" hidden=true>*</font>Last Name: <input type="text" name="lname" required><br><br> 
      <font color="red" id="hideaddr" hidden=true>*</font>Address: <input type="text" name="addr" required><br><br> 
      <font color="red" id="hidescity" hidden=true>*</font>City: <input type="text" name="city" required> 
      <font color="red" id="hideprov" hidden=true>*</font>Prov: <input type="text" name="prov" required><br><br> 
      <font color="red" id="hidepost" hidden=true>*</font>Postal Code: <input type="text" name="postal" required><br><br> 
      <font color="red" id="hidephone" hidden=true>*</font>Phone Number: <input type="text" name="phoneNum" required> 
      <font color="red" id="hidecell" hidden=true>*</font>Cell Number: <input type="text" name="Cellphone" required><br><br> 
      <font color="red" id="hideemail" hidden=true>*</font>Email: <input type="text" name="email" required><br><br> 
      <font color="red" id="hidedob" hidden=true>*</font>DoB: <input type="text" id="newsl" name="dob" required><br/><br/> 
      <font color="red" id="hidenews" hidden=true>*</font>Newsletter: yes: <input type="radio" id="newsl" name="newsletter" value="1"> 
                      no: <input type="radio" id="newsl" name="newsletter" value="0"><br><br> 
      <font color="red" id="hidevol" hidden=true>*</font>Volunteer:yes: <input type="radio" id="voll" name="volunteer" value="1"> 
                      no: <input type="radio" id="voll" name="volunteer" value="0"><br><br> 
      <font color="red" id="hidecrim" hidden=true>*</font>Criminal Record: yes: <input type="radio" id="criml" name="criminalrecord" value="1"> 
                      no: <input type="radio" id="criml" name="criminalrecord" value="0"><br><br> 

      <input type="submit" name="submit"> 

Answer 1

Я сделал быстрый пример того, как ваш код может выглядеть.

https://jsfiddle.net/8kn2hgtz/

- formatted your html 
- the asteriks is now css 
- the validation is annotation is way simpler 

Он может быть улучшен и расширен, и JQuery также предоставит вам некоторые методы, которые, кажется, чтобы упростить некоторые задачи, ...
но для первого впечатления я решил остаться с некоторыми простые строки кода (чистый html, js и css)

Ваш код не содержит реальной проверки; поэтому я тоже не реализовал его.
Поиск в google или в StackOverflow для некоторых библиотек, которые делают вашу жизнь простой в этой задаче.

Answer 2

Работа с кодом, который у вас есть, вы должны разблокировать все инструкции if, чтобы все они выполнялись.

Затем вы должны отслеживать общий результат - вы можете общаться с AND и OR, но самым простым является наличие одного булева, который изменяется по мере продвижения, например.

var isValid = true; 
if (x == null || x == " ") { 
document.getElementById("hidestar").hidden=false; 
isValid = false; 
} 
if (a == null || a == "") { 
    document.getElementById("hidelast").hidden=false; 
isValid = false; 
} 
if (b == null || b == "") { 
document.getElementById("hideaddr").hidden=false; 
isValid = false; 
} 
... 

и так далее до конца, где вы просто вернуться isValid.