Having trouble with form validation

Question

I am having trouble figuring out how to validate my form, how do I validate the firstname so that when I click submit and it is empty it will come up with error.

I have tried a few different ways of coding but i am very new to javascript and cant figure it out

Please let me know how to fix it as I am really struggling with 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> 

Answer 1

There are some issue with your code

• Missing } after function

• Use name instead of id for form forms['sightingform']

• Did not declare variable firsname

• animalclass not found in HTML => undefined

• Dont have head id in HTML

 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>