2016-04-29 60 views
-2

我刚开始学习HTML和JavaScript。 我想验证一个HTML表单的空字段,并使用for循环打印相应的错误消息作为输出。无法使用JavaScript打印for循环的验证错误

下面是jsp页面和javascript代码。

<script> 
 
    var err = new Array(); 
 
var i = 0, 
 
    flag = 0; 
 

 
function validateForm() { 
 
    var x = document.forms["RegistrationController"]["firstname"].value; 
 
    if (x == null || x == "") { 
 
    err[i++] = "First name cannot be empty"; 
 
    flag = 1; 
 
    } 
 
    var a = document.forms["RegistrationController"]["dob"].value; 
 
    if (a == null || a == "") { 
 
    err[i++] = "Date of birth cannot be empty"; 
 
    flag = 1; 
 
    } 
 
    var b = document.forms["RegistrationController"]["address_line_1"].value; 
 
    if (b == null || b == "") { 
 
    err[i++] = "Address cannot be empty"; 
 
    flag = 1; 
 
    } 
 
    var c = document.forms["RegistrationController"]["city"].value; 
 
    if (c == null || c == "") { 
 
    err[i++] = "city cannot be empty"; 
 
    flag = 1; 
 
    } 
 
    var d = document.forms["RegistrationController"]["pincode"].value; 
 
    if (d == null || d == "") { 
 
    err[i++] = "pincode cannot be empty"; 
 
    flag = 1; 
 
    } 
 
    var e = document.forms["RegistrationController"]["mobile_no"].value; 
 
    if (e == null || e == "") { 
 
    err[i++] = "mobile no cannot be empty"; 
 

 
    flag = 1; 
 
    } 
 
    var f = document.forms["RegistrationController"]["email"].value; 
 
    if (f == null || f == "") { 
 
    err[i++] = "email cannot be empty"; 
 
    flag = 1; 
 
    } 
 
    if (flag == 1) { 
 
    var string = ""; 
 
    for (j = 0; j < err.length; j++) { 
 
     document.getElementById("error").innerHTML = err[i]; 
 
     return false; 
 
    } 
 
    } 
 

 
} </script>
<html> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 

 
    <title>Registration</title> 
 
</head> 
 

 
<body> 
 
    <div class="error" id="error"></div> 
 
    <h1>Registration Form</h1> 
 
    <div class="ex"> 
 
    <form name="RegistrationController" method="post" onsubmit="return validateForm()"> 
 
     <table style="with: 50%"> 
 
     <tr> 
 
      <td>First name</td> 
 
      <td> 
 
      <input type="text" name="firstname" /> 
 
      </td> 
 
     </tr> 
 

 
     <tr> 
 
      <td>Last name</td> 
 
      <td> 
 
      <input type="text" name="lastname" /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Date of Birth</td> 
 
      <td> 
 
      <input type="text" name="dob" /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Address Line 1</td> 
 
      <td> 
 
      <input type="text" name="address_line_1" /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Address Line 2</td> 
 
      <td> 
 
      <input type="text" name="address_line_2" /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>state</td> 
 
      <td> 
 
      <input type="text" name="state" /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>city</td> 
 
      <td> 
 
      <input type="text" name="city" /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>pincode</td> 
 
      <td> 
 
      <input type="text" name="pincode" /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Mobile no</td> 
 
      <td> 
 
      <input type="text" name="mobile_no" /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>email</td> 
 
      <td> 
 
      <input type="text" name="email" /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>gender</td> 
 
      <td> 
 
      <input type="radio" name="gender" />Male</td> 
 
      <td> 
 
      <input type="radio" name="gender" />Female</td> 
 
     </tr> 
 
     </table> 
 
     <input type="submit" value="register" /> 
 
    </form> 
 
    </div> 
 

 
</body> 
 

 
</html>

+0

'的innerHTML = + ERR [1] +“
”;'为'innerHTML'将取代'在每次迭代HTML' ... – Rayon

+1

功能甚至没有定义的,因为你写的脚本标记,< script >代替

1

参考这个答案。我修改了一下你的代码。

  • <script>标签不应该包括空格之后<

  • 在显示迭代i

    是refered但您在使用j for循环

  • 我认为使用的getElementById是更有效的

<!DOCTYPE html> 
<script> 
function validateForm() { 
    var err = new Array(); 
var i = 0; 
var flag = 0; 
    var x = document.getElementById("firstname").value; 

    if (x == null || x == "") { 
    err[i++] = "First name cannot be empty"; 
    flag = 1; 
    } 
    var a = document.getElementById("dob").value; 
    if (a == null || a == "") { 
    err[i++] = "Date of birth cannot be empty"; 
    flag = 1; 
    } 
    var b = document.getElementById("address_line_1").value; 
    if (b == null || b == "") { 
    err[i++] = "Address cannot be empty"; 
    flag = 1; 
    } 
    var c = document.getElementById("city").value; 
    if (c == null || c == "") { 
    err[i++] = "city cannot be empty"; 
    flag = 1; 
    } 
    var d = document.getElementById("pincode").value; 
    if (d == null || d == "") { 
    err[i++] = "pincode cannot be empty"; 
    flag = 1; 
    } 
    var e = document.getElementById("mobile_no").value; 
    if (e == null || e == "") { 
    err[i++] = "mobile no cannot be empty"; 

    flag = 1; 
    } 
    var f = document.getElementById("email").value; 
    if (f == null || f == "") { 
    err[i++] = "email cannot be empty"; 
    flag = 1; 
    } 
    if (flag == 1) { 
    var string = ""; 
    for (j = 0; j < err.length; j++) { 
     document.getElementById("error").innerHTML = err[j]; 
     return false; 
    } 
    } 

} </script> 


<html> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 

    <title>Registration</title> 
</head> 

<body> 
    <div class="error"id="error"></div> 
    <h1>Registration Form</h1> 
    <div class="ex"> 
    <form> 
     <table style="with: 50%"> 
     <tr> 
      <td>First name</td> 
      <td> 
      <input type="text" id="firstname" /> 
      </td> 
     </tr> 

     <tr> 
      <td>Last name</td> 
      <td> 
      <input type="text" id="lastname" /> 
      </td> 
     </tr> 
     <tr> 
      <td>Date of Birth</td> 
      <td> 
      <input type="text" id="dob" /> 
      </td> 
     </tr> 
     <tr> 
      <td>Address Line 1</td> 
      <td> 
      <input type="text" id="address_line_1" /> 
      </td> 
     </tr> 
     <tr> 
      <td>Address Line 2</td> 
      <td> 
      <input type="text" id="address_line_2" /> 
      </td> 
     </tr> 
     <tr> 
      <td>state</td> 
      <td> 
      <input type="text" id="state" /> 
      </td> 
     </tr> 
     <tr> 
      <td>city</td> 
      <td> 
      <input type="text" id="city" /> 
      </td> 
     </tr> 
     <tr> 
      <td>pincode</td> 
      <td> 
      <input type="text" id="pincode" /> 
      </td> 
     </tr> 
     <tr> 
      <td>Mobile no</td> 
      <td> 
      <input type="text" id="mobile_no" /> 
      </td> 
     </tr> 
     <tr> 
      <td>email</td> 
      <td> 
      <input type="text" id="email" /> 
      </td> 
     </tr> 
     <tr> 
      <td>gender</td> 
      <td> 
      <input type="radio" id="gender" />Male</td> 
      <td> 
      <input type="radio" id="gender" />Female</td> 
     </tr> 
     </table> 
     <input type="button" value="register" onclick="validateForm();" /> 
    </form> 
    </div> 

</body> 

</html> 
+0

当你使用'getElementById',你必须定义输入id像这样'' –