CODEWITHSUNDEEP
javascriptformshtmlvalidation
roger34
roger34

Reputation: 275

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_%+-]+@[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>

Upvotes: 3

Views: 260

Answers (6)

MrTippet
MrTippet

Reputation: 306

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);">

Upvotes: 0

Blender
Blender

Reputation: 298364

This might be the problem:

function verify_email(email_val)
{
  var regex = /^[A-Z0-9_%+-]+@[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_%+-]+@[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).

Upvotes: 0

Bhanu Prakash Pandey
Bhanu Prakash Pandey

Reputation: 3785

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_%+-]+@[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>

Upvotes: 3

matthewpavkov
matthewpavkov

Reputation: 2928

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.

Upvotes: 0

Matt Phillips
Matt Phillips

Reputation: 11519

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()" />

Upvotes: 0

Richard
Richard

Reputation: 1172

Try using

 <script type="text/javascript">
  function verify_email (email_val)
  {
    var regex = /^[A-Z0-9_%+-]+@[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>

Upvotes: 0

Related Questions