Homework help, what am I doing wrong here? [Javascript, validation]

Question

Homework help, what am I doing wrong here? [Javascript, validation]

Trying to get this form to validate email using the function the professor said to use. We cannot use jquery or any other way to handle this. He's very...specific...on how he wants things done. Anyway, last week of a web design course and introduces javascript without much explanation.

The function is simply validating email but I have no frickin clue on how to call the function properly (verify_email). I've found countless examples of how to do this other ways but I'm pretty sure he will take off points for not doing it his way. Frantically trying to format this on an edit... it was fine when I submitted.

 <!DOCTYPE html>
 <html lang="en-US">
 <head>
   <title>Feedback</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <link type="text/css" rel="stylesheet" href="media/css/webpageCSS.css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery /1.4.4/jquery.min.js"></script>

  <script type="text/javascript">
  function verify_email ()
  {
      var email_val=document.getElementById("email").value;
  var regex = /^[A-Z0-9_%+-][email protected][A-Z0-9.-]+\.[A-Z]{2,4}$/i;
  if( email_val.search( regex ) == -1)
  {
  alert("Email is not valid");
  return false;
  }
  else
  {
  return true;
  }
  }
 </script>


 </head>
 <body class="sdd">

  <nav>
    <a href="Project4.html">Home</a>
      &nbsp;&nbsp;<a href="resume.html">Resume</a>
      &nbsp;&nbsp;<a href="classList.html">Class List</a>
      &nbsp;&nbsp;<a href="misc.html">Miscellaneous</a>
      &nbsp;&nbsp;<a href="comments.html">Feedback</a>
  </nav>
    <header>
  <h1 class="sd">Feedback Page</h1> 
  </header>
    <div id="wrapper">
        <div id="leftcolumn2">
        </div>
    <div id="rightcolumn2">
     <section>
     <br><br>
      Feedback Form:
    <form name="comform" method="post" action="http://webdevfoundations.net/scripts/formdemo.asp" onsubmit="return verify_email();">
        <table class="comtab">
            <tr>
                <td>*First Name: <input type="text" name="fname" id="fname"></td>
                <td>*Last Name: <input type="text" name="lname" id="flname"></td>
            </tr>
            <tr>
                <td id="com" colspan="2"><textarea cols="60" rows=5 name="comments" id="comments">Enter your feedback here</textarea></td>
            </tr>
            <tr>
                <td class="alignl" colspan="2">Email (optional): <input type="text" name="email" id="email"></td>

            </tr>
            <tr>
                <td class="alignl" colspan="2"><input type="submit" value="Submit Comment" ></td>
            </tr>

        </table>
    </form>
    </section>

    <footer class="footbot">
  &copy; 2010
    </footer>
    </div>
    </div>

6 Answers

Try using

 <script type="text/javascript">
  function verify_email (email_val)
  {
    var regex = /^[A-Z0-9_%+-][email protected][A-Z0-9.-]+\.[A-Z]{2,4}$/i;
    if( email_val.search( regex ) == -1)
    {
      alert("Email is not valid");
      return false;
    }else{
      return true;
    }
  }
 </script>

0 Created by Richard on 2020-03-18 08:32:25 +0000 UTC

Share

In the body of your page you need to register the function with the input for the email.

<input type="text" name="email" onchange="verify_email()" />

0 Created by Matt Phillips on 2020-03-18 08:32:25 +0000 UTC

Share

Are you wanting to pass the string "email" to the email validation function? Or do you want to actually check whatever is in the email input? If you're just passing "email" to test, it needs to be in quotes (') for it to be passed correctly.

0 Created by matthewpavkov on 2020-03-18 08:32:26 +0000 UTC

Share

This might be the problem:

function verify_email(email_val)
{
  var regex = /^[A-Z0-9_%+-][email protected][A-Z0-9.-]+\.[A-Z]{2,4}$/i;

  if (email_val.search(regex) == -1)
  {
    alert("Email is not valid");
    return false;
  }

  return true;
}

It will always return true. Also, search doesn't handle Regex. You need to run the string onto the regex. This code might work:

function verify_email(email_val)
{
  var regex = /^[A-Z0-9_%+-][email protected][A-Z0-9.-]+\.[A-Z]{2,4}$/i;

  if (regex.exec(email_val) == -1)
  {
    alert("Email is not valid");
    return false;
  } else {
    return true;
  }
}

Also, see the comment Matt Phillips posted: Homework help, what am I doing wrong here? [Javascript, validation].

Also, verify_email(email) is not defined. You should use verify_email(document.getElementById('email').value).

0 Created by Blender on 2020-03-18 08:32:26 +0000 UTC

Share

The javascript variable email is not defined anywhere so you are passing an undefined variable to the javascript function. call the function like

<input type="submit" value="Submit Comment" onclick="verify_email(document.getElementById('email').value);">

0 Created by MrTippet on 2020-03-18 08:32:26 +0000 UTC

Share

Bhanu Prakash Pandey · Accepted Answer · 2020-03-18 08:32:24 +0000 UTC

try this

  <!DOCTYPE html>
    <html lang="en-US">
 <head>
  <title>Feedback</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link type="text/css" rel="stylesheet" href="media/css/webpageCSS.css"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

      <script type="text/javascript">
      function verify_email ()
      {
          var email_val=document.getElementById("email").value;
      var regex = /^[A-Z0-9_%+-][email protected][A-Z0-9.-]+\.[A-Z]{2,4}$/i;
      if( email_val.search( regex ) == -1)
      {
      alert("Email is not valid");
      return false;
      }
      else
      {
      return true;
      }
      }
     </script>


    </head>
    <body class="sdd">

  <nav>
    <a href="Project4.html">Home</a>
          &nbsp;&nbsp;<a href="resume.html">Resume</a>
          &nbsp;&nbsp;<a href="classList.html">Class List</a>
          &nbsp;&nbsp;<a href="misc.html">Miscellaneous</a>
          &nbsp;&nbsp;<a href="comments.html">Feedback</a>
  </nav>
        <header>
  <h1 class="sd">Feedback Page</h1> 
  </header>
        <div id="wrapper">
            <div id="leftcolumn2">
            </div>
        <div id="rightcolumn2">
        <section>
        <br><br>
        Feedback Form:
        <form name="comform" method="post" action="http://webdevfoundations.net/scripts/formdemo.asp" onsubmit="return verify_email();">
            <table class="comtab">
                <tr>
                    <td>*First Name: <input type="text" name="fname" id="fname"></td>
                    <td>*Last Name: <input type="text" name="lname" id="flname"></td>
                </tr>
                <tr>
                    <td id="com" colspan="2"><textarea cols="60" rows=5 name="comments" id="comments">Enter your feedback here</textarea></td>
                </tr>
                <tr>
                    <td class="alignl" colspan="2">Email (optional): <input type="text" name="email" id="email"></td>

                </tr>
                <tr>
                    <td class="alignl" colspan="2"><input type="submit" value="Submit Comment" ></td>
                </tr>

            </table>
        </form>
        </section>

        <footer class="footbot">
      &copy; 2010
        </footer>
        </div>
        </div>
 </body>
</html>