Javascript 操作属性不适用于JS验证表单

Javascript 操作属性不适用于JS验证表单,javascript,html,forms,Javascript,Html,Forms,文件位于正确的位置,表单页面和表单完成页面位于同一文件夹中。当我单击submit时,它会正确地验证表单,但是如果所有内容都正确地输入并验证,它什么也不做,只是像js中应该的那样去掉星号。我希望在您点击提交并运行验证后,它链接到form_complete.html页面,但在它验证之后,什么都没有发生 html: <form id="contactform" action="form_complete.html" method="post"> <p class = "lab

文件位于正确的位置,表单页面和表单完成页面位于同一文件夹中。当我单击submit时,它会正确地验证表单,但是如果所有内容都正确地输入并验证,它什么也不做,只是像js中应该的那样去掉星号。我希望在您点击提交并运行验证后,它链接到form_complete.html页面,但在它验证之后,什么都没有发生

html:

<form  id="contactform" action="form_complete.html" method="post">

  <p class = "labelp">
    <label for="name">Name: </label>
    <input type="text" name="name" id="name" placeholder="Enter your name" >
    <span>*</span><br><br>
  </p>
  <p class = "labelp">
    <label for="age">Age: </label>
    <input type="text" min="18" max="100" name="age" id="age" placeholder="Enter your age">  
    <!-- using type=text so I can practice isNaN in js -->
    <span>*</span><br><br>
  </p>
  <p class = "labelp"></p>
    <label for="country">Country: </label>
    <select name="country" id="country">
      <option value ="">Select a country</option>
      <option>USA</option>
      <option>Canada</option>
      <option>Mexico</option>
      <option>Brazil</option>
      <option>Japan</option>
      <option>China</option>
      <option>Other</option>
    </select>
    <span>*</span><br><br>
  </p>
  <p class = "labelp">
    <label for="email">E-mail: </label>
    <input type="email" name="email" id="email" placeholder="Enter your E-mail">
    <span>*</span><br><br>
  </p>
  <p class = "labelp">
    <label for="bday">Birthday: </label>
    <input type="date" name="bday" id="bday">
    <span>*</span><br><br>
  </p>
  <p class = "labelp">
    <label for="gender" id="gender">Gender: </label>
    <input type="radio" name="gender" value="male" id="male"> Male
    <input type="radio" name="gender" value="female" id="female"> Female
    <input type="radio" name="gender" value="other" id="other"> Other
    <br><br>
  </p>
    <label>Comments: </label>
    <textarea rows="5" cols="30">  </textarea><br><br>

    <input type="button" id="registerbtn" value="Submit">
    <input type="button" id="resetbtn" value="Reset">
</form>

请在“processEntries”函数的末尾添加以下条件

"use strict";
var $ = function(id) { return document.getElementById(id);};




var processEntries = function(){
    var isValid = true;


// values
var name = $("name").value;
var age = $("age").value;
var country = $("country").value;
var email = $("email").value;
var bday = $("bday").value;
var gender = "";
if ($("male").checked){gender = "Male";}
if ($("female").checked){gender = "Female";}
if ($("other").checked){gender = "Other";}
console.log(gender);  //check if gender buttons work

// name
if(name == ""){
    $("name").nextElementSibling.firstChild.nodeValue = "This field is required!";
    isValid = false;}
else{
    $("name").nextElementSibling.firstChild.nodeValue = "";
    }


// age
if(age == ""){
    $("age").nextElementSibling.firstChild.nodeValue = "This field is required!";
    isValid = false;
}
else if(isNaN(age)){
    $("age").nextElementSibling.firstChild.nodeValue = "This field must be a number!";
    isValid = false;
}
else{
        $("age").nextElementSibling.firstChild.nodeValue = "";
    }


//country
if(country == ""){
    $("country").nextElementSibling.firstChild.nodeValue = "Please select a country!";
    isValid = false;}
else{
    $("country").nextElementSibling.firstChild.nodeValue = "";
     }


 //email    
if(email == ""){
    $("email").nextElementSibling.firstChild.nodeValue = "This field is required!";
    isValid = false;}
else{
        $("email").nextElementSibling.firstChild.nodeValue = "";
    }

 //birthday   
if(bday == ""){
    $("bday").nextElementSibling.firstChild.nodeValue = "This field is required!";
    isValid = false;}
else{
    $("bday").nextElementSibling.firstChild.nodeValue = "";
    }
}

var resetForm = function(){
    $("contactform").reset();
    $("name").nextElementSibling.firstChild.nodeValue = "*";
    $("age").nextElementSibling.firstChild.nodeValue = "*";
    $("country").nextElementSibling.firstChild.nodeValue = "*";
    $("email").nextElementSibling.firstChild.nodeValue = "*";
    $("bday").nextElementSibling.firstChild.nodeValue = "*";
}


window.onload = function() {
    $("registerbtn").onclick = processEntries;
    $("resetbtn").onclick = resetForm;
    $("name").focus();
}
if(isValid){
     $("#contactform").submit();
}