Home Ask Login Register

Developers Planet

Your answer is one click away!

Dylan Owen February 2016

JavaScript only validating the first field

So basically I'm trying to create a list of input boxes which need to each be validated before they can be submit. I'm a very basic beginner at JavaScript and HTML and would appreciate any input as only the first form is being validated. As long as there is alphabetic characters in Forename it will submit.

  <p><b> Forename: </b></p>
  <input type="text" size="32" name="frmForename" placeholder="Dylan">

  <p><b> Surname: </b></p>
  <input type="text" size="32" name="frmSurname" placeholder="Owen">

  <p><b> Gender: </b></p>
  <input type="radio" name="frmGender" value="male"> Male
  <input type="radio" name="frmGender" value="female"> Female

  <p><b> Date of Birth:</b><p>
  <input type ="text" size="32" name="frmDateOfBirth" placeholder="DD/MM/YYYY">

  <p><b> Age: </b></p> 
  <input type ="text" size="32" name="frmAge" min="12" max="150" placeholder="Enter Your Age">

  <p><b> Course: </b></p> <select name="frmCourse" id="frmCourse">
  <option value="select">Select Your Course</option>
  <option value="databases">Databases</option>
  <option value="websites">Websites</option>
  <option value="networks">Networks</option>

  <p><input type="submit" value="Enter Details" onclick=" return checkForm(); checkForm2();">
     <input type="reset" value="Clear Form" onclick="return confirm_reset();">
     <button onclick="goBack()">Back</button> </p>
  <font size="3" color="red">All forms <u>must</u> be complete.</font> 

  <p><b> Date Registered: </b></p>
  <input type="text" size="55" id="dateReg" readonly/>



The JavaScript



Scott Marcus February 2016

This line:

  onclick=" return checkForm(); checkForm2();

means that if checkForm returns false (which it does when form.frmForename.value == ""), then the false is used with the return in return checkForm() and the click event is cancelled, so the form does not submit. Then checkForm2() is called, but by then the button click has already been cancelled.

Also, there is no need to separate each function into its own <script> element. You should also be working with the form.submit event, rather than the button.click event and you should not be using inline event handlers (on...), but rather with standard element.addEventListener().

Post Status

Asked in February 2016
Viewed 2,999 times
Voted 14
Answered 1 times


Leave an answer

Quote of the day: live life