This is my form:

```
<div id="MyModal" class="m-modal-container">
  <div class="form-wrap">
    <form id="form_reg" class="m-form reg-form" action="www.somedomain.com/subPage">
      <div class="form-element email">
    <input type="email" class="text" name="email" id="email" value="" placeholder="Email Address" title="Email is required." maxlength="90" required>
      </div>
      <div class="form-element buttons">
        <button type="submit" class="button primary submit">Register</button>
      </div>
    </form>
  </div>
</div>

```

This is from my JS file to handle the submit

```
$("#MyModal #form_reg").submit(function(event){
    var initial_id = 0;

    $.ajax({
        url: '/dir/file.cfc',
        async: false,
        data: {
            method: 'myFunction', 
            emailAddress: $("#MyModal #form_reg").find('[name="email"]').val(), 
            email_id: 0
        },
        cache: false,
        type: 'get',
        dataType: 'json'
    })
    .success(function(response) { initial_id = response.jsid; }) 
    .error(function(jqXHR, textStatus, errorThrown) { })
    .complete(function(response) { 
        if (initial_id == 0) {
            return true;
        } else {
            event.preventDefault();
            $('#MyModal').dialog('close');
            return false;               
        }
    });
});

```

My question:

This form displays as a modal over the main page. The user fills it out, and clicks the submit and it goes to a new page. It uses HTML5 form validation to indicate required fields. It uses webShims/polyfill for older browser compatibility. 

That all works as it should. My issues arises in certain circumstances, I do not want the form to submit to the "subPage" (the default action on the form). Instead I want it to simply close the modal-form, staying on the page that displayed the modal. (This occurs in the event that the email is already in the system - do not want to take the user to the secondary form page showing a message that the email is already in the system).

If I use $("#MyModal #form\_reg").click(function(event){ blah blah blah }); - then I can control the submission vs. non-submission. However, I then lose the HTML5 form validation feature. If I use $("#MyModal #form\_reg").submit(function(event){ blah blah blah }); the form validation works, but the page submits and the event is not being captured by the code.

All the researching I've done to date indicates that IE7 does not play well with the .submit event, however, I need the .submit event for the form validation to work.

Is there a way for these three things to work together? IE7 is the only browser causing my issue. the .submit/form validation works as intended in FF, IE9, Opera, and Chrome.

Any suggestions would be greatly appreciated. Thank you.