我在弄清楚如何验证表单，如何验证名字方面遇到麻烦，因此当我单击“提交”并且该名字为空时，它将出现错误。
我尝试了几种不同的编码方式，但是我对javascript很陌生，无法弄清楚
请让我知道如何解决它，因为我确实在用JavaScript挣扎
function validateForm(event) {
event.preventDefault();
document.forms('sightingform');
document.getElementById("firsname").value;
document.getElementById("lasname").value;
document.getElementById("animalclass").selectedIndex;
if(firsname.value.length == 0){
document.getElementById('head').innerText = "* All fields are mandatory *";
firsname.focus();
return false;
} <form class="form-group" id="sightingform" >
<fieldset>
<label class="block" for="firstName" >First Name</label>
<input type="text" id="firsname" name="firstname" class="form-control" placeholder="Enter your First Name...">
</fieldset>
<fieldset>
<label class="block" for="lastName">Last Name</label>
<input type="text" id="lasname" name="lastname" class="form-control" placeholder="Enter your Last Name...">
</fieldset>
<fieldset>
<label class="block" for="mobile">Mobile Telephone Number</label>
<input type="tel" name="number" class="form-control" placeholder="Enter your mobile number...">
</fieldset>
<fieldset>
<label class="block" for="animal">Class of Animal</label>
<select name="animals" class="form-control">
<option value="select">Select Animal</option>
<option value="amphibians">Amphibians</option>
<option value="arthropods">Arthropods</option>
<option value="birds">Birds</option>
<option value="fish">Fish</option>
<option value="mammals">Select Animal</option>
<option value="reptiles">Reptiles</option>
</select>
</fieldset>
<fieldset>
<label for="sighting" class="block">Date of Sighting</label>
<input type="date" name="date" class="form-control">
</fieldset>
<fieldset>
<label for="time" class="block">Time of Sighting</label>
<input type="time" name="time" class="form-control">
</fieldset>
<fieldset>
<label for="desc" class="block">Description</label>
<textarea row="3" cols="30" name="desc" class="form-control" placeholder="Enter description of the sighted animal..."></textarea>
</fieldset>
<fieldset id="state">
<label for="sighting" class="block">State</label>
<item class="inline form-check-label">
<input type="checkbox" name="checkbox1">QLD
</item>
<item class="inline form-check-label">
<input type="checkbox" name="checkbox2">NSW
</item>
<item class="inline form-check-label">
<input type="checkbox" name="checkbox3">VIC
</item>
<item class="inline form-check-label">
<input type="checkbox" name="checkbox4">WA
</item>
<item class="inline form-check-label">
<input type="checkbox" name="checkbox5">SA
</item>
<item class="inline form-check-label">
<input type="checkbox" name="checkbox6">NT
</item>
<item class="inline form-check-label">
<input type="checkbox" name="checkbox7">ACT
</item>
</fieldset>
<fieldset>
<label for="nearest-town" class="block">Nearest Town</label>
<input type="text" name="town" class="form-control" placeholder="Enter the nearest town...">
</fieldset>
<fieldset id="submit">
<input type="submit" class="btn btn-primary" onClick="validateForm(event)" value="Submit Sighting">
</fieldset>
</form>
答案 0 :(得分：1)
您的代码有问题
在表单forms['sightingform']
未声明变量firsname
动物类=>未定义
function validateForm(event) {
event.preventDefault();
document.forms['sightingform'];
var firsname = document.getElementById("firsname");
document.getElementById("lasname").value;
//document.getElementById("animalclass").selectedIndex;
if(firsname.value.length == 0){
document.getElementById('head').innerText = "* All fields are mandatory *";
firsname.focus();
return false;
}
}<form class="form-group" name="sightingform" >
<h3 id='head'></h3>
<fieldset>
<label class="block" for="firstName" >First Name</label>
<input type="text" id="firsname" name="firstname" class="form-control" placeholder="Enter your First Name...">
</fieldset>
<fieldset>
<label class="block" for="lastName">Last Name</label>
<input type="text" id="lasname" name="lastname" class="form-control" placeholder="Enter your Last Name...">
</fieldset>
<fieldset>
<label class="block" for="mobile">Mobile Telephone Number</label>
<input type="tel" name="number" class="form-control" placeholder="Enter your mobile number...">
</fieldset>
<fieldset>
<label class="block" for="animal">Class of Animal</label>
<select name="animals" class="form-control">
<option value="select">Select Animal</option>
<option value="amphibians">Amphibians</option>
<option value="arthropods">Arthropods</option>
<option value="birds">Birds</option>
<option value="fish">Fish</option>
<option value="mammals">Select Animal</option>
<option value="reptiles">Reptiles</option>
</select>
</fieldset>
<fieldset>
<label for="sighting" class="block">Date of Sighting</label>
<input type="date" name="date" class="form-control">
</fieldset>
<fieldset>
<label for="time" class="block">Time of Sighting</label>
<input type="time" name="time" class="form-control">
</fieldset>
<fieldset>
<label for="desc" class="block">Description</label>
<textarea row="3" cols="30" name="desc" class="form-control" placeholder="Enter description of the sighted animal..."></textarea>
</fieldset>
<fieldset id="state">
<label for="sighting" class="block">State</label>
<item class="inline form-check-label">
<input type="checkbox" name="checkbox1">QLD
</item>
<item class="inline form-check-label">
<input type="checkbox" name="checkbox2">NSW
</item>
<item class="inline form-check-label">
<input type="checkbox" name="checkbox3">VIC
</item>
<item class="inline form-check-label">
<input type="checkbox" name="checkbox4">WA
</item>
<item class="inline form-check-label">
<input type="checkbox" name="checkbox5">SA
</item>
<item class="inline form-check-label">
<input type="checkbox" name="checkbox6">NT
</item>
<item class="inline form-check-label">
<input type="checkbox" name="checkbox7">ACT
</item>
</fieldset>
<fieldset>
<label for="nearest-town" class="block">Nearest Town</label>
<input type="text" name="town" class="form-control" placeholder="Enter the nearest town...">
</fieldset>
<fieldset id="submit">
<input type="submit" class="btn btn-primary" onClick="validateForm(event)" value="Submit Sighting">
</fieldset>
</form>