Question

我目前正在使用表格和javascript验证。.我已经完成了大部分代码，已经在最后一步，但是似乎无法正常工作，并且不确定ive错了。我寻求帮助。

基本上，用户将他们的信息输入表单，然后单击提交，信息便会得到验证，并且输入的信息会移动到确认页面上。.目前，我输入的信息不再得到验证，并且在输入中为空白确认页面。

第一个HTML注册页面

 <form id="regform" method="post" action="confirm.html" 
 novalidate="novalidate">
 <fieldset id="person"> 
<legend>Your details:</legend>
<p><label for="firstname">Enter your first name</label>
    <input type="text" name="firstname" id="firstname" size="20"  
 />
</p>
<p><label for="lastname">Enter your last name</label>
    <input type="text" name="lastname" id="lastname" size="20"  />
 </p>    
<fieldset id="species">
    <legend>Species:</legend>
        <label for="human">Human</label>
        <input type="radio" name="species" id="human" 
 value="Human"/><br />
        <label for="dwarf">Dwarf</label>
        <input type="radio" name="species" id="dwarf" 
 value="Dwarf" /><br />
        <label for="elf">Elf</label>
        <input type="radio" name="species" id="elf" 
 value="Elf" /><br />
        <label for="hobbit">Hobbit</label>
        <input type="radio" name="species" id="hobbit" 
 value="Hobbit" /><br />
</fieldset>
<p><label for="age">Enter your age</label>
    <input type="text" id="age" name="age" size="5">
</p>


  </fieldset>
 <fieldset id="trip"> 
 <legend>Your trip:</legend>
<fieldset>
    <legend>Booking:</legend>
        <label for="1day">1 Day Tour - $200 </label>
        <input type="checkbox" name="1day" id="1day" 
value="1day" /><br />
        <label for="4day">4 Day Tour - $1500</label>
        <input type="checkbox" name="4day" id="4day" 
value="4day" /><br />
        <label for="10day">10 Day Tour - $3000</label>
        <input type="checkbox" name="10day" id="10day" 
 value="10day" /><br />
</fieldset>
<p>
    <label for="food">Menu preferences</label>
    <select name="food" id="food">
        <option value="none">Please select</option>
        <option value="lembas">Lembas</option>
        <option value="mushrooms">Mushrooms</option>
        <option value="ent">Ent Draft</option>
        <option value="cram">Cram</option>
    </select>
</p>
<p>
<label for="partySize">Number of Travellers</label>
        <input type="text" id="partySize" name="partySize" maxlength="3" 
size="3" />
</p>
</fieldset>
 <div id="bottom"> </div>
 <p><input type="submit" value="Book Now!" />
 <input type="reset" value="Reset" />
 </p>

JavaScript验证

    function validate() {

var errMsg = "";
var result = true;

var firstname = document.getElementById("firstname").value;
var lastname = document.getElementById("lastname").value;



if (!firstname.match(/^[a-zA-Z]+$/)) {
    errMsg = errMsg + "Your first name must only contain alpha characters\n";
    result = false; 
}

if (!lastname.match(/^[a-zA-Z+$]/)) {
    errMsg = errMsg + "Your last name must only contain alpha characters\n";
    result = false;
}

var age = document.getElementById("age").value;

if (isNaN(age)) {
    errMsg = errMsg + "your age must be a number\n";
    result = false;
}

     else if (age < 18) {
    errMsg = errMsg + " your age must be 18 or older\n";
    result = false;
}
     else if (age >= 10000) {
    errMsg = errMsg + "your age must be between 18 and 10000\n";
    result = false;
}
    else {
        var tempMsg = checkSpeciesAge(age);
        if (tempMsg != "") {
            errMsg + tempMsg;
            result = false;
        } 

        var partySize = document.getElementById("partySize").value;


        if (isNaN(partySize)) {
            errMsg = errMsg + "your age must be a number\n";
            result = false;
     }
            else if (partySize < 1) {
            errMsg = errMsg + " party size must be greater than 0\n";
            result = false;
        }
            else if (age >= 100) {
            errMsg = errMsg + "your party size must be less or equal to 100\n";
            result = false;
        }

    }

var is1day = document.getElementById("1day").checked;
var is4day = document.getElementById("4day").checked;
var is10day = document.getElementById("10day").checked;


if (!(is1day || is4day || is10day)) {
    errMsg = errMsg + "please select at least one trip.\n";
    result = false;
}


if (document.getElementById("food").value == "none") {
    errMsg = errMsg + "You must select a food preference. \n ";
    result = false;
}

var human = document.getElementById("human").checked;
var dwarf = document.getElementById("dwarf").checked;
var elf = document.getElementById("elf").checked;
var hobbit = document.getElementById("hobbit").checked;

if (!(human || dwarf || elf || hobbit)) {
    errMsg = errMsg + "please select a spiecies";
    result = false;
}





if (errMsg !== "") {
    alert(errMsg);
}

if (result) {
    storeBooking(firstname, lastname, age, species, is1day, is4day, is10day);
}

return result;
}

 function getSpecies() {

var speciesName = "Unknown";

var speciesArray = document.getElementById("species").getElementsByTagName("input");

for (var i = 0; i < speciesArray.length; i++){
    if (speciesArray[i].checked)
        speciesName = speciesArray[i].value;
} 
return speciesName;
}



  function checkSpeciesAge(age) {

var errMsg = "";
var species = getSpecies();
switch(species){
    case "human":
        if (age > 120) {
            errMsg = "you cannot be a Human and over 120. \n";  
        }
        break;
    case "dwarf":
    case "hobit": 
        if (age > 150 ){
            errMsg = " YOu can not be a " + species + " and over 150 .\n ";
        }
        break;
    case "elf":
        break;

    default: 
        errMsg = " we dont allow your kind on our tours. \n";

        }
        return errMsg;
}

   function storeBooking(firstname, lastname, age, species, is1day, is4day, is10day){

var trip= "";
if(is1day) trip ="1day";
if(is4day) trip +=", 4day";
is(is10day) trip += ", 10day";
sessionStorage.trip = trip;
sessionStorage.firstname= firstname;
sessionStorage.lastname= lastname;
sessionStorage.age = age;
sessionStorage.species= species;
sessionStorage.partySize= partySize;
sessionStorage.food = food;


alert ("Trip stored: " + sessionStorage.trip); 


}

  function init() {
     var regForm = document.getElementById("regform");
regForm.onsubmit = validate;
}
 window.onload = init;

确认HTML

 <form id="bookform">
<fieldset>
    <legend>Your Booking</legend>
    <p>Your Name: <span id="confirm_name"></span></p>
    <p>Species: <span id="confirm_species"></span></p>
    <p>Age: <span id="confirm_age"></span></p>
    <p>Trips booked: <span  id="confirm_trip"></span></p>
    <p>Food Preference: <span  id="confirm_food"></span></p>
    <p>Number of beings: <span  id="confirm_partySize"></span></p>
    <p>Total Cost: $<span  id="confirm_cost"></span></p>
    <input type="hidden" name="firstname" id="firstname" />
    <input type="hidden" name="lastname" id="lastname" />
    <input type="hidden" name="age" id="age" />
    <input type="hidden" name="species" id="species" />
    <input type="hidden" name="trip" id="trip" />
    <input type="hidden" name="food" id="food" />
    <input type="hidden" name="partySize" id="PartySize" />
    <input type="hidden" name="cost" id="cost" />



    <p><label for="date">Preferred Date</label>
        <input type="text" id="date" name="bookday" required="required" placeholder="dd/mm/yyyy" pattern="\d{1,2}/\d{1,2}/\d{4}" title="Format dd/mm/yyyy" maxlength="10" size="10" />
    </p>
    <input type="submit" value="Confirm Booking" />
    <button type="button" id="cancelButton">Cancel</button>
</fieldset>

Javascrips文件2将信息带到确认

 function validate(){

var errMsg = "";                                
var result = true;                              


return result;    


 function calcCost(trips, partySize){
var cost = 0;
if (trips.search("1day") != -1) cost = 200;
if (trips.search("4day")!= -1) cost += 1500;
if (trips.search("10day")!= -1) cost += 3000;
return cost * partySize;
}

  function getBooking(){
var cost = 0;
if(sessionStorage.firstname != undefined){    
    //confirmation text
    document.getElementById("confirm_name").textContent = sessionStorage.firstname + " " + sessionStorage.lastname;
    document.getElementById("confirm_age").textContent =sessionStorage.age;
    document.getElementById("confirm_trip").textContent = sessionStorage.trip;
    document.getElementById("confirm_species").textContent = sessionStorage.species;
    document.getElementById("confirm_food").textContent =sessionStorage.food;
    document.getElementById("confirm_partySize").textContent = sessionStorage.partySize;
    cost = calcCost(sessionStorage.trip, sessionStorage.partySize);
    document.getElementById("confirm_cost").textContent = cost;
    //fill hidden fields
    document.getElementById("firstname").value = sessionStorage.firstname;

    document.getElementById("lastname").value = sessionStorage.lastname;

    document.getElementById("age").value = sessionStorage.age;

    document.getElementById("species").value = sessionStorage.species;

    document.getElementById("food").value = sessionStorage.food;

    document.getElementById("partySize").value = sessionStorage.partySize;

    document.getElementById("cost").value = cost;
}

}


   function init () {

var bookForm = document.getElementById("bookform");
bookForm.onsubmit = validate; 



  }

 window.onload = init;

Answer 1

打开浏览器控制台时，应该清楚地看到一些语法错误：
-errMsg + tempMsg;不是完整的声明，
-is(is10day) trip += ", 10day";无效，并且
-storeBooking没有名为partySize

的参数

我也看到一些逻辑错误：
-checkSpeciesAge绝不会返回validate期望的空字符串，并且
-尝试验证partySize的代码段有几个错误（包括整个结构嵌套在age-validation节的else块中。）

一些console.log语句对于在更正这些问题后仍然存在要追查的错误的情况下，在确定变量中包含不期望的值的位置可能会大有帮助。祝你好运！

Answer 2

我试图解决此问题，并在您的代码中进行了一些更改。根据您的要求

关注jsfiddle的链接； https://jsfiddle.net/dupinderdhiman/vno15jku/32/

      <form id="bookform">
<fieldset>
    <legend>Your Booking</legend>
    <p>Your Name: <span id="confirm_name"></span></p>
    <p>Species: <span id="confirm_species"></span></p>
    <p>Age: <span id="confirm_age"></span></p>
    <p>Trips booked: <span  id="confirm_trip"></span></p>
    <p>Food Preference: <span  id="confirm_food"></span></p>
    <p>Number of beings: <span  id="confirm_partySize"></span></p>
    <p>Total Cost: $<span  id="confirm_cost"></span></p>
    <input type="hidden" name="firstname" id="firstname" />
    <input type="hidden" name="lastname" id="lastname" />
    <input type="hidden" name="age" id="age" />
    <input type="hidden" name="species" id="species" />
    <input type="hidden" name="trip" id="trip" />
    <input type="hidden" name="food" id="food" />
    <input type="hidden" name="partySize" id="PartySize" />
    <input type="hidden" name="cost" id="cost" />



    <p><label for="date">Preferred Date</label>
        <input type="text" id="date" name="bookday" required="required" placeholder="dd/mm/yyyy" pattern="\d{1,2}/\d{1,2}/\d{4}" title="Format dd/mm/yyyy" maxlength="10" size="10" />
    </p>
    <input type="submit" value="Confirm Booking"/>
    <button type="button" id="cancelButton">Cancel</button>
</fieldset>


<script>

sessionStorage.trip = "4day";
sessionStorage.firstname= "firstname";
sessionStorage.lastname= "lastname";
sessionStorage.age = 21;
sessionStorage.species= "species";
sessionStorage.partySize= 10;
sessionStorage.food = "food";


function validate(){

var errMsg = "";                                
var result = true;                              
return result;    
}

 function calcCost(trips, partySize){
var cost = 0;
if (trips.search("1day") != -1) cost = 200;
if (trips.search("4day")!= -1) cost += 1500;
if (trips.search("10day")!= -1) cost += 3000;
return cost * partySize;
}

function loadDataFromSession(){
var cost = 0;
if(sessionStorage.firstname != undefined){    
    //confirmation text
    document.getElementById("confirm_name").textContent = sessionStorage.firstname + " " + sessionStorage.lastname;
    document.getElementById("confirm_age").textContent =sessionStorage.age;
    document.getElementById("confirm_trip").textContent = sessionStorage.trip;
    document.getElementById("confirm_species").textContent = sessionStorage.species;
    document.getElementById("confirm_food").textContent =sessionStorage.food;
    document.getElementById("confirm_partySize").textContent = sessionStorage.partySize;
    cost = calcCost(sessionStorage.trip, sessionStorage.partySize);
    document.getElementById("confirm_cost").textContent = cost;
    //fill hidden fields
    document.getElementById("firstname").value = sessionStorage.firstname;

    document.getElementById("lastname").value = sessionStorage.lastname;

    document.getElementById("age").value = sessionStorage.age;

    document.getElementById("species").value = sessionStorage.species;

    document.getElementById("food").value = sessionStorage.food;

    document.getElementById("partySize").value = sessionStorage.partySize;

    document.getElementById("cost").value = cost;
}
}



   function init () {
   loadDataFromSession();
    var bookForm = document.getElementById("bookform");
        bookForm.onsubmit = validate; 
  }

 window.onload = init;


</script>

主要变化是什么？

创建了一个函数loadDataFromSession，该函数调用init（）;
从getBooking()中删除代码，并将其添加到loadDataFromSession中。
现在单击提交，您的表格将被提交

在HTML页面之间传输数据似乎不起作用？

2 个答案: