Method Community

Hi Ken,

With red I've highlighted the "onsubmit" you need to have in order for validation to happen. With yellow, I've highlighted the script where you will need to insert the email validity script.

Hope it helps.

Victor

<!-- INSERT THE FOLLOWING IN BETWEEN THE ‘BODY’ TAGS IN YOUR HTML PAGE -->
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<script src="https://www.methodintegration.com/MethodWebForms/Javascript/formValidation.js" type="text/javascript"></script>
<script type="text/javascript">
function validate_form(thisform){
     with (thisform){
 if (validate_required("FirstName_Step2","vld_FirstName_Step2","First Name must be filled out!")==false)
{document.getElementById("FirstName_Step2").focus();return false;}
 if (validate_required("LastName_Step2","vld_LastName_Step2","Last Name must be filled out!")==false)
{document.getElementById("LastName_Step2").focus();return false;}
 if (validate_required("Phone_Step2","vld_Phone_Step2","Phone must be filled out!")==false)
{document.getElementById("Phone_Step2").focus();return false;}
 if (validate_required("Email_Step2","vld_Email_Step2","Email must be filled out!")==false)
{document.getElementById("Email_Step2").focus();return false;}
 if (validate_maxLength("Description_Step3","vld_Description_Step3","Products / Services: maximum length should be 4000 characters!",4000)==false)
{document.getElementById("Description_Step3").focus();return false;}
         document.getElementById('submit_web_form').disabled=true;
     }
}
</script>

<form action="https://www.methodintegration.com/method/timezonerouter.aspx?url=https://www.methodintegration.com/MethodWebForms/submit.aspx"

onsubmit="return validate_form(this)"

method="POST">
<input type="hidden" name="oid" value="6rfk02WvNXej9bVFGxdrjQ=="/>
<input type="hidden" name="retURL" value="http://varzero.webomanager.com/thankyou"/>
<input type="hidden" name="formName" value="Web-To-Lead"/>
<table>
   <tr>
      <td  valign ="top">
         <label for="CompanyName_Step2">Company Name</label>
      </td>
      <td>
         <input type="text" id="CompanyName_Step2" name="CompanyName_Step2" maxlength="41" size="20" value="" />
      </td>
   </tr>
   <tr>
      <td  valign ="top">
         <label for="FirstName_Step2">First Name</label>
      </td>
      <td>
         <input type="text" id="FirstName_Step2" name="FirstName_Step2" maxlength="25" size="20" value="" />
         <span id="vld_FirstName_Step2" style="color:Red">*</span>
      </td>
   </tr>
   <tr>
      <td  valign ="top">
         <label for="LastName_Step2">Last Name</label>
      </td>
      <td>
         <input type="text" id="LastName_Step2" name="LastName_Step2" maxlength="25" size="20" value="" />
         <span id="vld_LastName_Step2" style="color:Red">*</span>
      </td>
   </tr>
   <tr>
      <td  valign ="top">
         <label for="Phone_Step2">Phone</label>
      </td>
      <td>
         <input type="text" id="Phone_Step2" name="Phone_Step2" maxlength="21" size="20" value="" />
         <span id="vld_Phone_Step2" style="color:Red">*</span>
      </td>
   </tr>
   <tr>
      <td  valign ="top">
         <label for="Email_Step2">Email</label>
      </td>
      <td>
         <input type="text" id="Email_Step2" name="Email_Step2" maxlength="1023" size="20" value="" />
         <span id="vld_Email_Step2" style="color:Red">*</span>
      </td>
   </tr>
   <tr>
      <td  valign ="top">
         <label for="BillAddressAddr3_Step2">Address</label>
      </td>
      <td>
         <input type="text" id="BillAddressAddr3_Step2" name="BillAddressAddr3_Step2" maxlength="41" size="20" value="" />
      </td>
   </tr>
   <tr>
      <td  valign ="top">
         <label for="BillAddressCity_Step2">City</label>
      </td>
      <td>
         <input type="text" id="BillAddressCity_Step2" name="BillAddressCity_Step2" maxlength="31" size="20" value="" />
      </td>
   </tr>
   <tr>
      <td  valign ="top">
         <label for="BillAddressState_Step2">State / Province</label>
      </td>
      <td>
         <input type="text" id="BillAddressState_Step2" name="BillAddressState_Step2" maxlength="21" size="20" value="" />
      </td>
   </tr>
   <tr>
      <td  valign ="top">
         <label for="BillAddressPostalCode_Step2">Postal Code</label>
      </td>
      <td>
         <input type="text" id="BillAddressPostalCode_Step2" name="BillAddressPostalCode_Step2" maxlength="13" size="20" value="" />
      </td>
   </tr>
   <tr>
      <td  valign ="top">
         <label for="BillAddressCountry_Step2">Country</label>
      </td>
      <td>
         <input type="text" id="BillAddressCountry_Step2" name="BillAddressCountry_Step2" maxlength="31" size="20" value="" />
      </td>
   </tr>
</table>
<table>
   <tr>
      <td  valign ="top">
         <label for="Description_Step3">Products / Services:</label>
      </td>
      <td>
         <textarea rows="5" id="Description_Step3" name="Description_Step3" ></textarea>
         <span id="vld_Description_Step3" style="color:Red"></span>
      </td>
   </tr>
</table>
<input type="submit" name="submit_web_form" id="submit_web_form" value="Submit" />
</form>

 Victor,

Can you take a quick look at the code and see what we missed on the validation? Thanks!

<!DOCTYPE html><!-- HTML 5 -->
<html dir="ltr" lang="en-US">
<head>

<title>test5 | VarZero</title>
<link rel="shortcut icon" href="http://varzero.webomanager.com/files/2011/02/vzfavicon.png" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<meta name="generator" content="WordPress 3.0.5" />
<link rel="pingback" href="http://varzero.com/xmlrpc.php" />
 <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arvo">
<!--[if IE 6]>
<script src="http://varzero.com/wp-content/themes/varzero/core/js/ie.belatedpng.js"></script>
<script>DD_belatedPNG.fix('.pngbg, .shadow-bottom, .post-comments a, #fcolumns_container, #footer img, .branding_wrap img, .fboxgraphic img ');</script>
<![endif]-->
<meta name='robots' content='noindex,nofollow' />
<link rel="alternate" type="application/rss+xml" title="VarZero &raquo; Feed" href="http://varzero.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="VarZero &raquo; Comments Feed" href="http://varzero.com/comments/feed/" />
    
 <script type="text/javascript">//<![CDATA[
 // Google Analytics for WordPress by Yoast v4.06 | http://yoast.com/wordpress/google-analytics/
 var _gaq = _gaq || [;
 _gaq.push(['_setAccount','UA-21326870-1']);
 _gaq.push(['_trackPageview']);
 (function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();
 // End of Google Analytics for WordPress by Yoast v4.0
 //]]></script>
<link rel="alternate" type="application/rss+xml" title="VarZero &raquo; test5 Comments Feed" href="http://varzero.com/test5/feed/" />
<link rel='stylesheet' id='pagelines-pro-css'  href='http://varzero.com/wp-content/themes/varzero/pro/pro.css?ver=4.0.0' type='text/css' media='all' />
<link rel='stylesheet' id='pagelines-stylesheet-css'  href='http://varzero.com/wp-content/themes/varzero_child/style.css?ver=4.0.0' type='text/css' media='all' />
<!--[if lte IE 6]>
<link rel='stylesheet' id='ie6-style-css'  href='http://varzero.com/wp-content/themes/varzero/css/ie6.css?ver=3.0.5' type='text/css' media='all' />
<![endif]-->
<!--[if IE 7]>
<link rel='stylesheet' id='ie7-style-css'  href='http://varzero.com/wp-content/themes/varzero/css/ie7.css?ver=3.0.5' type='text/css' media='all' />
<![endif]-->
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='http://varzero.com/wp-includes/js/comment-reply.js?ver=20090102'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://varzero.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://varzero.com/wp-includes/wlwmanifest.xml" />
<link rel='index' title='VarZero' href='http://varzero.com/' />
<link rel='prev' title='test' href='http://varzero.com/test/' />
<link rel='next' title='Thank You!' href='http://varzero.com/thankyou/' />
<meta name="generator" content="WordPress 3.0.5" />

<!-- All in One SEO Pack 1.6.13.1 by Michael Torbert of Semper Fi Web Design[69,83] -->
<link rel="canonical" href="http://varzero.com/test5/" />
<!-- /all in one seo pack -->
<style type="text/css" media="screen">

/* Begin Contact Form CSS */
.contactform {
 position: static;
 overflow: hidden;
 width: 95%;
}

.contactleft {
 width: 25%;
 white-space: pre;
 text-align: right;
 clear: both;
 float: left;
 display: inline;
 padding: 4px;
 margin: 5px 0;
}

.contactright {
 width: 70%;
 text-align: left;
 float: right;
 display: inline;
 padding: 4px;
 margin: 5px 0;
}

.contacterror {
 border: 1px solid #ff0000;
}

.contactsubmit {
}
/* End Contact Form CSS */

 </style>

</head>
<body class="page page-id-101 page-template page-template-default logged-in full_width">

  
  <div id="site" class="one-sidebar-right"> <!-- #site // Wraps #header, #page-main, #footer - closed in footer -->
  
    <div id="page"> <!-- #page // Wraps #header, #page-main - closed in footer -->
   
      <div id="header" class="container-group fix">
    <div class="outline">
        <div id="branding" class="container fix">
    <div class="texture">
     <div class="content">
      <div class="content-pad">
<div class="branding_wrap">
 <a href="http://varzero.com" title="VarZero Home">
    <img src="http://varzero.webomanager.com/files/2011/02/vz_logo3.jpg" alt="VarZero" />
 </a>
  
 
 <div class="icons" style="bottom: 52px; right: px;">

    <a target="_blank" href="http://varzero.com/feed/" class="rsslink"></a>
    
           <a target="_blank" href="http://twitter.com/#!/var_zero" class="twitterlink"></a>
            <a target="_blank" href="http://www.linkedin.com/company/varzero?trk=fc_badge" class="linkedinlink"></a>
           <a href="http://www.stumbleupon.com/stumbler/pagelines/" class="stumbleupon"></a>
    
 </div>
</div>
     <div id="header-contact">
         Call Us: 1-857-524-5137
        </div>
   
          <div class="clear"></div>
     </div>
    </div>
   </div>
  </div>
   <div id="primary-nav" class="container fix">
    <div class="texture">
     <div class="content">
      <div class="content-pad">
 <div id="nav_row" class="fix">

<ul id="menu-main-navigation" class="main-nav nosearch"><li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-16"><a href="http://varzero.com/">Home</a></li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-29"><a href="http://varzero.com/about-us/">About Us</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-28"><a href="http://varzero.com/solutions/">Solutions</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-27"><a href="http://varzero.com/customers/">Customers</a></li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-26"><a href="http://varzero.com/blog/">Blog</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-25"><a href="http://varzero.com/contact-us/">Contact Us</a></li>
</ul> </div>
       <div class="clear"></div>
     </div>
    </div>
   </div>
  </div>
    </div>
   </div>
      <div id="page-main" class="container-group fix"> <!-- #page-main // closed in footer -->
    <div class="outline fix">
        <div id="maincontent" class="container fix">
    <div class="texture">
     <div class="content">
      <div class="content-pad">
<div id="pagelines_content" class="one-sidebar-right fix">
 
  <div id="column-wrap" class="fix">
  
    <div id="column-main" class="mcolumn fix">
   <div class="mcolumn-pad" >
       <div id="theloop" class="copy fix">
    <div class="copy-pad">
<div class="post-101 page type-page hentry fpost" id="post-101">
    
    
    
        
      <div class="entry_wrap fix">
      
       <div class="entry_content">
        
<p><!-- INSERT THE FOLLOWING IN BETWEEN THE ‘BODY’ TAGS IN YOUR HTML PAGE --><br />
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8"><br />
<script src="https://www.methodintegration.com/MethodWebForms/Javascript/formValidation.js" type="text/javascript"></script><br />
<script type="text/javascript">
function validate_form(thisform){
     with (thisform){
 if (validate_required("FirstName_Step2","vld_FirstName_Step2","First Name must be filled out!")==false)
{document.getElementById("FirstName_Step2").focus();return false;}
 if (validate_required("LastName_Step2","vld_LastName_Step2","Last Name must be filled out!")==false)
{document.getElementById("LastName_Step2").focus();return false;}
 if (validate_required("Phone_Step2","vld_Phone_Step2","Phone must be filled out!")==false)
{document.getElementById("Phone_Step2").focus();return false;}
 if (validate_required("Email_Step2","vld_Email_Step2","Email must be filled out!")==false)
{document.getElementById("Email_Step2").focus();return false;}
 if (validate_maxLength("Description_Step3","vld_Description_Step3","Products / Services: maximum length should be 4000 characters!",4000)==false)
{document.getElementById("Description_Step3").focus();return false;}
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;</p>
<p>if (emailPattern.test(document.getElementById("Email_Step2").value) == false) {
   document.getElementById("vld_Email_Step2").innerHTML = "You email is invalid.";</p>
<p>   document.getElementById("Email_Step2").focus();
   return false;
}
else {</p>
<p>   document.getElementById(alertField).innerHTML = "";
}
         document.getElementById('submit_web_form').disabled=true;
     }
}
</script></p>
<form action="https://www.methodintegration.com/method/timezonerouter.aspx?url=https://www.methodintegration.com/MethodWebForms/submit.aspx" onsubmit="return validate_form(this)" method="POST">
<input type="hidden" name="oid" value="6rfk02WvNXej9bVFGxdrjQ=="/>
<input type="hidden" name="retURL" value="http://"/>
<input type="hidden" name="formName" value="Web-To-Lead"/>
<h3>Contact Information</h3>
<h4>Please enter your contact information below.</h4>
<table>
<tr>
<td  valign ="top">
         <label for="CompanyName_Step2">Company Name</label>
      </td>
<td>
<input type="text" id="CompanyName_Step2" name="CompanyName_Step2" maxlength="41" size="20" value="" />
      </td>
</tr>
<tr>
<td  valign ="top">
         <label for="FirstName_Step2">First Name</label>
      </td>
<td>
<input type="text" id="FirstName_Step2" name="FirstName_Step2" maxlength="25" size="20" value="" />
         <span id="vld_FirstName_Step2" style="color:Red">*</span>
      </td>
</tr>
<tr>
<td  valign ="top">
         <label for="LastName_Step2">Last Name</label>
      </td>
<td>
<input type="text" id="LastName_Step2" name="LastName_Step2" maxlength="25" size="20" value="" />
         <span id="vld_LastName_Step2" style="color:Red">*</span>
      </td>
</tr>
<tr>
<td  valign ="top">
         <label for="Phone_Step2">Phone</label>
      </td>
<td>
<input type="text" id="Phone_Step2" name="Phone_Step2" maxlength="21" size="20" value="" />
         <span id="vld_Phone_Step2" style="color:Red">*</span>
      </td>
</tr>
<tr>
<td  valign ="top">
         <label for="Email_Step2">Email</label>
      </td>
<td>
<input type="text" id="Email_Step2" name="Email_Step2" maxlength="1023" size="20" value="" />
         <span id="vld_Email_Step2" style="color:Red">*</span>
      </td>
</tr>
<tr>
<td  valign ="top">
         <label for="BillAddressAddr3_Step2">Address</label>
      </td>
<td>
<input type="text" id="BillAddressAddr3_Step2" name="BillAddressAddr3_Step2" maxlength="41" size="20" value="" />
      </td>
</tr>
<tr>
<td  valign ="top">
         <label for="BillAddressCity_Step2">City</label>
      </td>
<td>
<input type="text" id="BillAddressCity_Step2" name="BillAddressCity_Step2" maxlength="31" size="20" value="" />
      </td>
</tr>
<tr>
<td  valign ="top">
         <label for="BillAddressState_Step2">State / Province</label>
      </td>
<td>
<input type="text" id="BillAddressState_Step2" name="BillAddressState_Step2" maxlength="21" size="20" value="" />
      </td>
</tr>
<tr>
<td  valign ="top">
         <label for="BillAddressPostalCode_Step2">Postal Code</label>
      </td>
<td>
<input type="text" id="BillAddressPostalCode_Step2" name="BillAddressPostalCode_Step2" maxlength="13" size="20" value="" />
      </td>
</tr>
<tr>
<td  valign ="top">
         <label for="BillAddressCountry_Step2">Country</label>
      </td>
<td>
<input type="text" id="BillAddressCountry_Step2" name="BillAddressCountry_Step2" maxlength="31" size="20" value="" />
      </td>
</tr>
</table>
<h3>Products &amp; Services</h3>
<h4>Please let us know what product(s) or service(s) are you interested in.</h4>
<table>
<tr>
<td  valign ="top">
         <label for="Description_Step3">Products / Services:</label>
      </td>
<td>
         <textarea rows="5" id="Description_Step3" name="Description_Step3" ></textarea><br />
         <span id="vld_Description_Step3" style="color:Red"></span>
      </td>
</tr>
</table>
<input type="submit" name="submit" id="submit_web_form" value="Submit" />
</form>
         <div class="clear"></div>
         <a class="post-edit-link" href="http://varzero.com/wp-admin/post.php?post=101&amp;action=edit" title="Edit Page">[Edit Page]</a>       </div> 
       <div class="tags">
        &nbsp;
       </div>
      </div>
        </div>

    <div class="clear"></div>
    </div>
   </div>
   <div id="pl_comments" class="copy fix">
    <div class="copy-pad">

<div id="comments">
 
    <!-- If comments are closed. -->
   <p class="nocomments">Comments are closed.</p>
  
 
         </div>
    <div class="clear"></div>
    </div>
   </div>
   </div>
  </div>
  
    
 </div> 
 
 
 <div id="sidebar-wrap" class="fix">
   <div id="sidebar1" class="scolumn fix" >
    <div class="scolumn-pad">
        <div id="sidebar_secondary" class="copy fix">
    <div class="copy-pad">
 <ul id="list_sidebar_secondary" class="sidebar_widgets fix">
  <li id="text-9" class="widget_text widget fix"><div class="widget-pad">   <div class="textwidget"><a href="http://varzero.com/contact-us"><h3 class="contact-btn">Contact VarZero</h3></a></div>
  </div></li> </ul>
    <div class="clear"></div>
    </div>
   </div>
   <div id="sidebar_primary" class="copy fix">
    <div class="copy-pad">
 <ul id="list_sidebar_primary" class="sidebar_widgets fix">
  <li id="text-8" class="widget_text widget fix"><div class="widget-pad">   <div class="textwidget"><script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 5,
  interval: 6000,
  width: 250,
  height: 275,
  theme: {
    shell: {
      background: '#e7dee3',
      color: '#008cac'
    },
    tweets: {
      background: '#fcfcfc',
      color: '#545154',
      links: '#a671a6'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: true,
    hashtags: true,
    timestamp: false,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('var_zero').start();
</script></div>
  </div></li> </ul>
    <div class="clear"></div>
    </div>
   </div>
 
    </div>
   </div>
   </div>  

</div>      <div class="clear"></div>
     </div>
    </div>
   </div>
  </div>
   <div class="clear"></div>

   </div> <!-- END .outline -->
  </div> <!-- END #page-main from header -->
 </div> <!-- END #page from header -->

 <div  id="footer">
  <div class="outline fix">
      <div id="footcols" class="container fix">
    <div class="texture">
     <div class="content">
      <div class="content-pad">
   <div id="fcolumns_container" class="dcol_container_5 fix">
    
    <div id="text-4" class="widget_text dcol_5 dcol"><div class="dcol-pad">   <div class="textwidget"><a href="http://varzero.com/test5/#"><img src="http://varzero.webomanager.com/files/2011/02/vz_logo_ftr.jpg" /></a></div>
  </div></div><div id="nav_menu-4" class="widget_nav_menu dcol_5 dcol"><div class="dcol-pad"><div class="menu-main-navigation-container"><ul id="menu-main-navigation-1" class="menu"><li class="menu-item menu-item-type-post_type menu-item-16"><a href="http://varzero.com/">Home</a></li>
<li class="menu-item menu-item-type-post_type menu-item-29"><a href="http://varzero.com/about-us/">About Us</a></li>
<li class="menu-item menu-item-type-post_type menu-item-28"><a href="http://varzero.com/solutions/">Solutions</a></li>
<li class="menu-item menu-item-type-post_type menu-item-27"><a href="http://varzero.com/customers/">Customers</a></li>
<li class="menu-item menu-item-type-post_type menu-item-26"><a href="http://varzero.com/blog/">Blog</a></li>
<li class="menu-item menu-item-type-post_type menu-item-25"><a href="http://varzero.com/contact-us/">Contact Us</a></li>
</ul></div></div></div><div id="text-5" class="widget_text dcol_5 dcol"><div class="dcol-pad">   <div class="textwidget"><span>29 Crafts St., Suite 550 Newton, MA 02458
<br/>
<a href="mailto:info@varzero.com">info@varzero.com</a>
<br/>
(857) 524-5137</span></div>
  </div></div><div id="text-7" class="widget_text dcol_5 dcol"><div class="dcol-pad">   <div class="textwidget">Copyright © 2011 VarZero<br />All Rights Reserved<br /><a href="http://varzero.com/privacy-policy/">Privacy Policy</a><br /></div>
  </div></div>   </div> 
   <div class="clear"></div>
        <div class="clear"></div>
     </div>
    </div>
   </div>
  </div>
   <div class="clear"></div>
      <div class="clear"></div>
  </div>
 </div>
</div>
<script type='text/javascript' src='http://varzero.com/wp-content/themes/varzero/sections/nav/superfish.js?ver=1.0'></script>
<script type='text/javascript' src='http://varzero.com/wp-content/themes/varzero/sections/nav/jquery.bgiframe.min.js?ver=1.0'></script>
<!-- Powered by WP Engine --></body>
</html>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Served from: varzero.com @ 2011-02-23 19:55:59 -->

Ken -

My advice is to take the original web form code that was provided by Method and make sure that works on your site.  It should work just fine.

What I don't want this thread or forum to become is a place to troubleshoot web site's source code.  I see the purposes of this forum as a place to (1) troubleshoot the webform setup wizard; (2) troubleshoot the original web form HTML/Javascript code; and (3) to offer advice on how the web form functions so that web developers can interact with it.  Victor has done a great job going over and beyond - but I think we've taken it as far as we can take it here.  Entire page source code being copied and pasted on a forum post raises the alarm bells!!

It is fine to customize the HTML display.  In fact, it is encouraged - and your web form looks great!  However, it is important to tread carefully when designing.  Ideally, you should get an experienced web developer to assist you in doing this if you are modifying the code to the extent that you are, and they should approach this like any other software project: slowly adding code piece-by-piece and testing to make sure the process still functions properly at each point along the way.

If you are doing this coding yourself, and I'm taking a quick glance at your code, I'll give you a hint...it's important to know some basics on how to apply HTML tags in javascript. Here is a useful article that tells you some base-level fundamentals of how to "escape" characters in javascript:

http://www.htmlgoodies.com/beyond/javascript/article.php/3470891/Web-Developer-Tutorial-Escape-Characters.htm

If you are still totally stuck, one step I can suggest is booking some consulting time with Michael to get straightened out. 

Paul