Question

我当前正在执行单元任务，无法确定为什么我的JavaScript无法连接。我已经尝试了一些方法，但似乎无法解决。我肯定它很简单，但我无法解决。一个解释也很好。有两个文件，一个html和一个javascript。预先感谢

HTML

 <script src="validate.js"></script>
 </head>
 <body>
 <header>
 <h1>Rohirrim Ranch Tours</h1>
 <h2>Booking Form</h2>
 </header>
 <form id="regform" method="post" 
 action="https://mercury.swin.edu.au/it000000/formtest.php" 
 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>
<p><label for="beard">Enter your beard length in inches</label><br />
    0 <input type="range" id="beard" name="beard" min="0" 
max="60"> 60
</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>
</form>

JAVASCRIPT

"use strict";

function validate() {
var firstname = document.getElementById("firstname").value;
var lastname = document.getElementById("lastname").value;
var errMsg = "";
var result = true;

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;
}

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;

}


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

return result;
}

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

window.onload = init;

Answer 1

尝试将Javascript网址设置为“ ./validate.js”

Answer 2

我看到的是您的错误erMsg而不是errMsg

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

，并添加event.preventDefault（）;在validate函数的开头

您的js参考很好：）

似乎无法获得Javascript连接或正常工作

2 个答案: