验证功能不适用于创建的联系表单

时间:2018-03-09 17:46:03

标签: javascript validation

下面的代码只是一个随机创建的js验证代码,只是为了测试验证过程是否适用于我的代码,然后我将其更改为实际进行我想要的正确验证。

问题在于,填写表单后,我的联系表单的html页面将始终刷新,数据消失 但我似乎无法找到解决这个问题的原因?



// this is my code to create the code for my contact form to be filled 
// there are a selection of options


function validate() {
  // Declare all the variables here
  var firstName = document.getElementById("firstName").value;
  var lastName = document.getElementById("lastName").value;


  if (firstName == null || firstName == "" || lastName == null || lastName == "") {
    alert("Both Fields can't be empty");
  } else {
    if (firstName == "mike") {
      if (lastName == "wright") {
        alert("Success");
      } else {
        alert("Not Success");
      }
    } else {
      alert("Name wrong");
    }

  }

    <form action = "#" name ="conForm" onsubmit="validate();">
    
    <table cellpadding="2" width="20%" bgcolor="red"
    align="center" 
    cellspacing="2"
    
    <tr>
    <td colspan =2>
    <center> <h3style="background-color:red"> <font size = 4><b>FORM TO FILL IN </b></h3></font></center>
    </td>
    </tr>
    
    
    <td> Title </td>
    <td> <select Name="Title">
    <option value= "-1 selected"> select...</option>
    <option value= "Mr"> Mr </option>
    <option value= "Mrs"> Mrs </option>
    <option value= "Miss"> Miss </option>
    <option value= "Ms"> Ms </option>
    <option value= "Master"> Master</option>
    </select></td>
    </tr>
    
    <tr>
    <td>First Name</td>
    <td><input type ="text" name= "firstName" id ="firstName" size ="30"> </td>
    </tr>
    
    
    <tr>
    <td> Last Name</td>
    <td> <input type ="text" name ="lastName" id = "lastName" size ="30"> </td>
    </tr>
    
    <tr>
    <td> Health Authority Number</td>
    <td> <input type ="text" name ="healthNumber" id = "healthNumber" size ="30"> </td>
    </tr>
    
    <tr>
    <td> Email</td>
    <td> <input type ="text" name ="email" id = "email" size ="30"> </td>
    </tr>
    
    <tr>
    <td> Telephone Number</td>
    <td> <input type ="text" name ="telephoneNumber" id = "telephoneNumber" size ="30"> </td>
    </tr>
    
    <tr>
    <td colspan ="2"> <input type="submit" value="submit form" </td>
    </tr>
    </table>
    </form>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:-1)

使用按钮代替提交表单

<button type="button">Submit</button>

或者根本不使用表格。