I can't seem to find the errors

Question

Even if there's no text in the field, it still directs to the email page.

First check whether anything has been entered in the required field. If there's no text in the textfield it should display an alert.

<html>
 <head>
  <script type="text/javascript">
    function checkForm(){        
     if (document.getElementById("lname").value == ""){          window.alert("Please enter your last name");
       document.getElementById("lname").focus();
       return false;
      }
      return true;
     }
            
  </script>
  <title>Testing your Javascript skills</title>
 </head>
 <body>
   <form action="mailto:me@fakeemail.com" onsubmit="checkForm()">
           
           <p>The fields marked with an asterisk (*) are required fields:</p>
           
           <p>*First Name: <input type="text" name="fname" id="fname" /></p>
           <p>*Last Name: <input type="text" name="lname" id="lname" /></p>
          
           <input type="submit" value="Enter Info" />
          </form>
          
 </body>
</html

See https://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission — Nico Haase, Oct 22 '20 at 06:11

score 1 · Answer 1 · answered Oct 22 '20 at 06:16

Pass the event object on submit handler and if last name is empty prevent the default behavior

function checkForm(e) {
  if (document.getElementById("lname").value === "") {
    e.preventDefault();
    window.alert("Please enter your last name");
    document.getElementById("lname").focus();
    return false;
  }
  return true;
}

<form action="mailto:me@fakeemail.com" onsubmit="checkForm(event)">
  <p>The fields marked with an asterisk (*) are required fields:</p>
  <p>*First Name: <input type="text" name="fname" id="fname" /></p>
  <p>*Last Name: <input type="text" name="lname" id="lname" /></p>
  <input type="submit" value="Enter Info" />
</form>

I can't seem to find the errors

1 Answers1