Magento form validation, form does not submit with valid fields

Question

I have created a custom signup form to be included in the header of my Magento template which posts to extension I'm building.

I've used Magento form validation on the form, but when I click submit - the form does nothing. I can see that the "validation-passed" class has been applied to all elements but nothing happens.

<form action="http://XXXXXXX/newslettersignup/" method="post" id="newsletter-validate-detail">
    <div class="formBox">
        <ul class="form-list">
            <li>
                <div class="field">
                    <label for="email" class="required">Email</label>
                    <div class="input-box">
                        <input  type="email" name="email" id="email" title="Email" value="" class="input-text required-entry validate-email" />
                    </div>
                </div>
            </li>
            <li id="title_item">
                <div class="field">
                    <label for="title" class="required">Title</label>
                    <div class="input-box">
                        <select id="title" name="title" title="Title">
                            <option value="Mrs">Mrs</option>
                            <option value="Miss">Miss</option>
                            <option value="Ms">Ms</option>
                            <option value="Mr">Mr</option>
                            <option value="Dr">Dr</option>
                            <option value="Lady">Lady</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                </div>
            </li>
            <li id="other_title_item" style="display:none;">
                <div class="field">
                    <label for="other_title" >Other</label>
                    <div class="input-box">
                        <input name="other_title" id="other_title" title="Title" value="" class="input-text" type="text" />
                    </div>
                </div>
            </li>
            <li>
                <div class="field">
                    <label for="firstname" class="required">First Name</label>
                    <div class="input-box">
                        <input name="firstname" id="firstname" title="First Name" value="" class="input-text required-entry" type="text" />
                    </div>
                </div>
            </li>
            <li>
                <div class="field">
                    <label for="lastname" class="required">Surname</label>
                        <div class="input-box"><input name="lastname" id="lastname" title="Surname" value="" class="input-text required-entry" type="text" /></div>
                        <button type="submit" title="Sign up" class="button slidein-submit">
                            <span><span>Sign up</span></span>
                        </button>
                </div>
            </li>
        </ul>
    </div>
</form>

<script type="text/javascript">
    //<![CDATA[
        var newsletterSubscriberFormDetail = new VarienForm('newsletter-validate-detail');
    //]]>
</script>

Answer 1

The problem was that I had two forms on the page with the same id "newsletter-validate-detail".

I found this out by placing a breakpoint on line 321 of varien/js.js which showed me that another input was failing the validation on the page. I realised this input belonged to another form of the same ID.

Once I changed the form id on the form, it submitted just fine.

Answer 2

I have checked your form is working with validation. it is correct. you need to put this form in phtml file then check. if not work then you need to check is there any error of jquery or you have code which conflict with this.