验证所有表单字段——函数不能正常工作

我创建了一个html表单和一个函数validateForm()来验证表单字段。然而，该函数只报告错误的电子邮件输入问题，而不验证表单中的其他字段。你能检查一下我的代码，看看是否有错误吗?

感谢

<!DOCTYPE html>
<html lang="en">
<head>
<title>Support Center</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/layout.css" type="text/css">
<link rel="stylesheet" href="styles/Form.css" type="text/css">
<script type="text/javascript" src="Form.js"></script>
</head>
<body>
<div class="wrapper row1">
  <header id="header" class="clear">
    <div id="hgroup">
      <h1><a href="index.html">Support Center</a></h1>
      <h2>Welcome to our website</h2>
    </div>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Our Staff</a></li>
        <li><a href="#">Location</a></li>
        <li><a href="Form.html">Help</a></li>
        <li class="last"><a href="#"></a></li>
      </ul>
    </nav>
  </header>
</div>
</body>
<!-- content -->
<body>
      <h1>Help is here!</h1>
  <form>
        <h1>Should you need assistance, please do not hesitate to contact us:</h1>
    <div class="contentform">
        <div id="sendmessage"> Your form has been sent successfully. Thank you. </div>
        <div class="leftcontact">
                  <div class="form-group">
                    <p>Surname<span>*</span></p>
                    <span class="icon-case"><i class="fa fa-male"></i></span>
                        <input type="text" name="lastName" id="lastName"/>
                <div class="validation"></div>
       </div> 
            <div class="form-group">
            <p>First Name <span>*</span></p>
            <span class="icon-case"><i class="fa fa-user"></i></span>
                <input type="text" name="firstName" id="firstName"/>
                <div class="validation"></div>
            </div>
            <div class="form-group">
            <p>E-mail <span>*</span></p>    
            <span class="icon-case"><i class="fa fa-envelope-o"></i></span>
                <input type="email" name="emailAddress" id="emailAddress"/>
                <div class="validation"></div>
            </div>  
            <div class="form-group">
            <p>Office <span>*</span></p>
            <span class="icon-case"><i class="fa fa-location-arrow"></i></span>
                <input type="text" name="office" id="office"/>
                <div class="validation"></div>
            </div>
            <div class="form-group">
            <p>Desk <span>*</span></p>
            <span class="icon-case"><i class="fa fa-map-marker"></i></span>
                <input type="text" name="deskNumber" id="deskNumber"/>
                <div class="validation"></div>
            </div>  

    </div>
    <div class="rightcontact">  
            <div class="form-group">
            <p>Phone number <span>*</span></p>  
            <span class="icon-case"><i class="fa fa-phone"></i></span>
                <input type="text" name="mobilePhone" id="mobilePhone"/>
                <div class="validation"></div>
            </div>
            <div class="form-group">
            <p>Job Number <span>*</span></p>
            <span class="icon-case"><i class="fa fa-building-o"></i></span>
                <input type="text" name="jobNumber" id="jobNumber"/>
                <div class="validation"></div>
            </div>  
            <div class="form-group">
            <p>Computer <span>*</span></p>
            <span class="icon-case"><i class="fa fa-info"></i></span>
                <input type="text" name="computerNumber" id="computerNumber"/>
                <div class="validation"></div>
            </div>
            <div class="form-group">
            <p>Problem <span>*</span></p>   
            <span class="icon-case"><i class="fa fa-comment-o"></i></span>
                <select name="Problem">
                    <option value="New User">New User</option>
                    <option value="Delete User">Delete User</option>
                    <option value="Lost File">Lost File</option>
                    <option value="New Software Installation">New Software Installation</option>
                    <option value="Virus Checking">Virus Checking</option>
                </select>
                <div class="validation"></div>
            </div>
            <div class="form-group">
            <p>A little about your problem <span>*</span></p>
            <span class="icon-case"><i class="fa fa-comments-o"></i></span>
                <textarea name="message" rows="14"></textarea>
                <div class="validation"></div>
            </div>  
    </div>
    </div>
<button type="submit" class="bouton-contact">Send</button>
</form> 

</body>
</html>
</body>
</html>

function validateForm() {
  var letters = "[A-Za-z]+$";
  var numbers = "^[0-9]+$";
  var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;

  var jobNumber = document.getElementById("jobNumber").value;
  var firstName = document.getElementById("firstName").value;
  var lastName = document.getElementById("lastName").value;
  var mobilePhone = document.getElementById("mobilePhone").value;
  var emailAddress = document.getElementById("emailAddress").value;
  var officeNumber = document.getElementById("office").value;
  var deskNumber = document.getElementById("deskNumber").value;
  var computerNumber = document.getElementById("computerNumber").value;

  if(jobNumber != "" && firstName != "" && lastName != "" && mobilePhone != "" && emailAddress != "" && officeNumber != "" && deskNumber != "" && computerNumber != "") {
    if(jobNumber.length == 5 && jobNumber.match(numbers)) {
      if(firstName.match(letters) && lastName.match(letters)) {
        if(mobilePhone.length == 10 && mobilePhone.match(numbers)) {
          if(emailAddress.match(emailReg)) {
            alert("Form submitted!");
            return true;
          }
          else {
            alert("Please enter a valid email");
            return false;
          }
        }
        else {
          alert("Please enter a valid mobile number");
          return false;
        }
      }
      else {
        alert("Please enter a valid first name and last name");
        return false;
      }
    }
    else {
      alert("Please enter a valid job number");
      return false;
    }
  }
  else {
    alert("Please enter in all fields");
    return false;
  }
}

编辑:我刚刚注意到你正在使用一个类contentform，我认为这是一个id。我还将添加一个id到您的表单，以便能够检索所有表单数据与一个DOM遍历，而不是几个。此外，电子邮件是唯一一个工作的原因是因为浏览器正在验证电子邮件而不使用你的JS。

首先，我将放弃所有声明的变量，并将其替换为form对象。

var formObject = document.getElementById('contentform');
然后可以检查所需的任何子元素。我还会删除if语句的嵌套，而不是警告错误并返回false，而是将错误添加到数组中以存储每个错误，然后在所有项验证后返回。

var errorList = []; var isValid = true; if(formObject.jobNumber == "") { errorList.push('Please enter a valid job number'); isValid = false; }
然后冲洗并重复所需的每个元素。之后，只需返回列表和状态(isValid)。

// this should be on its own at the bottom of your function right before you return if (!isValid) { alert(errorList); // I would add some formatting or preferably display in the form view. } return isValid; html file // add the event handler here <button type="submit" onclick="validateForm()" class="bouton-contact">Send</button>
同样，这些

if (!isValid) { alert(errorList); }
应该从每个if语句中删除，并在所有检查后放置在底部。

在这里验证您的电子邮件地址:首先通过post方法将id传递给javascript，然后函数validation()将起作用。

//html <div> <input type="text" name="email" id="email" class="" data-wow-delay=".5s" value="" placeholder="Email..." /> </div> <span id="emailerror" style="display:none; color:#F00">Enter valid email id*</span> <input type="submit" onClick="return validation();" class="wow fadeInUp" value="Send" /> //javascript function validation() { var email = document.getElementById('email').value; if(email == '' || !(/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(email))) { document.getElementById('emailerror').style.display = 'inline'; var error=1; } else { document.getElementById('emailerror').style.display = 'none'; } if(error == 1) { return false; } else { return true; } }
现在你的电子邮件验证工作正常，谢谢

相关内容

最新更新

热门标签：