This should be simple, but

JavaScript
1

The scenario: A web form with the usual first name, last name, phone number, etc.

Requirement: name fields are required. User must enter a phone number OR an email address.

The form uses HTML5 to do field pattern matching and validation, but I want to use javascript to ensure that either the phone number or the email address field is filled out before submitting the form data.

Here is some quick code I wrote to test checking the form elements. If neither field contains data, pop an alert, then set focus to the phone number field. The problem I am having is that phone number field does not get focused after dismissing the alert. Multiple examples I have found online show very similar syntax, so why doesn’t THIS one work?

<!DOCTYPE html>

<html lang="en">
<head>
    <title>Focus test</title>
</head>
<body>
    <form action="#" name="form1" onsubmit="required()">
        Please enter the following details:
        <p>
            Phone:
            <input type="tel" id="tele" name="tele" />
        </p>
        <p>
            Email:
            <input type="text" id="mail" name="mail" />
        </p>
        <p>
            <input type="submit" value="Submit" name="submit">
        </p>
    </form>

    <script type="text/javascript">
      
      function required()  {
        var telval=document.form1.tele.value;
        var mailval=document.form1.mail.value;

        if ((mailval == "") && (telval == ""))
        {
           alert("you must enter a phone number or an email address");
           document.form1.tele.focus();
           return false;
        }
         else
         {
           return true;
        }
        }
    </script>
</body>
</html>
3

It’s actually focusing. But what happens is that the form submits the input when you click the submit button, causing a reload. And by default no input fields have focus when a page loads.

You can do any of these:

  • Add the autofocus attribute to the phone field. That way it gets focus when the page (re)loads. Though it will still submit the form input whether you type something or not.

  • change onsubmit to required(); return false;. But that will prevent the form from submitting any data (unless you write more JS code to do that).

  • Add an event parameter to the required function. Then after giving the phone field focus, call event.preventDefault() to prevent the form from submitting. Like

    function required(event) {
  // ...
  if (...) {
    document.form1.tele.focus();
    event.preventDefault();
  }
}

    You also need to modify the required call in the HTML: onsubmit="required(event)".

    To be honest, I’m not sure how well it works.

4

That makes sense! Ignore my previous comment. I deleted it but I think you can still see it.
Anyways, you can use window.onload() function to set focus on the phone field each time the page reloads.

5

The problem with setting the focus on page load is that the field is not the first field in the form (seems odd to focus on a field in the middle of the form).

Also, if I understand kevcomedia, the form, even though it is popping the alert then focusing, it is submitting the form data anyway (which is actually another problem).

6

Hurray! I figured it out. The only thing I had to do was change

<form action="#" name="form1" onsubmit="required()">

change the “onsubmit” portion to:

<form action="#" name="form1" onsubmit="return required()">

So close, all it needed was the return in the onsubmit portion so it will return true or false from the check. If false, then the focus happens because the form does not get submitted. When true, it does.

Always ends up being something so simple, but drives you crazy until you figure it out.

1 Like
7

Great! Something I didn’t know. :slight_smile: Glad you figured it out.