title: How can I create the same functionality of onsubmit="return groupAdd()" when dynamically adding the onsubmit with an EventHandler?
body: <p>Use to just add an <code>onclick</code> event with a <code>button</code> and collect data, did not even need a <code>form element</code>, but with <code>HTML5</code> you can take advantage of error check and default messages displayed when a user submits a form.</p>
  
  <pre><code>&lt;input type="email" id="addEmail" name="addEmail"  placeholder="user@sample.com" value="" required="" title="" /&gt;
  </code></pre>
  
  <p>Since the type is <code>email</code> and there is a <code>require</code> attribute present the browser will check for a well structured email address <code>onsubmit</code>. If the value fails a message appears under the input indicating the user must fix the value.</p>
  
  <p>You can also use regular expression for example</p>
  
  <pre><code>&lt;input type="password" id="addPassword" name="addPassword"  placeholder="Password" value="" required="" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$"  title="" /&gt;
  </code></pre>
  
  <p>All together you have</p>
  
  <pre><code>&lt;script&gt;
  function userAdd(){
      *** xmlhttprequest code *******
      return false;
  }
  &lt;/script&gt;
  
  &lt;html&gt;
  &lt;form action="admin" method="post" onsubmit="return userAdd();"&gt;
  &lt;input type="email" id="addEmail" name="addEmail"  placeholder="user@sample.com" value="" required="" title="" /&gt;
  &lt;input type="password" id="addPassword" name="addPassword"  placeholder="Password" value="" required="" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$"  title="" /&gt;
  &lt;input type="submit" value="Submit" /&gt;
  &lt;/form&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I generate the form element dynamically I need to attach an event handler:</p>
  
  <pre><code>f = document.createElement('form');
  
  addEventHandler(f,'submit', function(){userAdd()});
  
  function addEventHandler(elem,eventType,handler) {
       if (elem.addEventListener)
           elem.addEventListener (eventType,handler,false);
       else if (elem.attachEvent)
           elem.attachEvent ('on'+eventType,handler); 
      }
  }
  </code></pre>
  
  <p>The reason I want to keep the default submit functionality is because of the built in HTML5 features. </p>
  
  <p>How can I create the same functionality of onsubmit="return groupAdd()" when dynamically adding the unsubmit with an EventHandler?</p>