Magento 1.9 – How to Use Magento’s Default Form Validation in a Pop-Up?

form-validationformsmagento-1.9

I have a form in a popup that I've been trying to use the default Magento validation with. I tried various tutorials with no luck. Even tried HTML5.

What happens is if someone just clicks the submit button the pop-up disappears and the red error message says to enter a valid email. But the pop-up is no longer there. What I need is to validate the form when they click the submit button without the form disappearing. When I tried using HTML5 I keep getting "Please match the pattern btw the pattern was pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/"` Anyway, I think the default Magento should be at least reliable but I haven't been able to get it to work.

Here is my code:

<div style="">
      <div id="newsletter-popup" class="container">
            <div class="sub-container">
                  <div class="content">
                        <div class="register-form">
                            <form id="newsletter-registration-form" action="<?php echo $this->getUrl('newsletter/subscriber/new/') ?>" method="post" id="newsletter-validate-detail">
                                    <div class="form-fields-middle">
                                        <div class="input-box">
                                            <input name="email" id="email" onfocus="if(this.value=='Enter Your Email') this.value=''" onblur="if(this.value=='') this.value='Enter Your Email'" class="input-text required-entry validate-email" type="text" value="Enter Your Email">
                                        </div>
                                    </div>
                                    <div class="actions">
                                        <button type="submit" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Subscribe')) ?>" class="button"><span><span><?php echo $this->__('Subscribe') ?></span></span></button>
                                    </div>
                            </form>
                        </div>
                  </div>
            </div>
      </div>
</div>
<script type="text/javascript">    
//<![CDATA[
    var newsletterSubscriberFormDetail = new VarienForm('newsletter-registration-form', false);
//]]>
</script>

Thanks

Best Answer

Try this

<div style="">
      <div id="newsletter-popup" class="container">
            <div class="sub-container">
                  <div class="content">
                        <div class="register-form">
                             <form action="<?php echo $this->getUrl('newsletter/subscriber/new/') ?>" method="post" id="newsletter-popup-validate-detail" name="newsletter-popup-validate-detail">
                                    <div class="form-fields-middle">
                                        <div class="input-box">
                                            <input name="email" id="email" onfocus="if(this.value=='Enter Your Email') this.value=''" onblur="if(this.value=='') this.value='Enter Your Email'" class="input-text required-entry validate-email" type="text" value="Enter Your Email">
                                        </div>
                                    </div>
                                    <div class="actions">
                                        <button type="submit" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Subscribe')) ?>" class="button"><span><span><?php echo $this->__('Subscribe') ?></span></span></button>
                                    </div>
                            </form>
                        </div>
                  </div>
            </div>
      </div>
</div>
<script type="text/javascript">    
//<![CDATA[
    var newsletterSubscriberFormDetail = new VarienForm('newsletter-popup-validate-detail', false);
//]]>
</script>

OR

<div style="">
      <div id="newsletter-popup" class="container">
            <div class="sub-container">
                  <div class="content">
                        <div class="register-form">
                            <form action="<?php echo $this->getUrl('newsletter/subscriber/new/') ?>" method="post" id="newsletter-popup-validate-detail" name="newsletter-popup-validate-detail">
                                    <div class="form-fields-middle">
                                        <div class="input-box">
                                            <input name="email" id="newsletter-email" class="input-text required-entry validate-email" type="text" value="">
                                        </div>
                                    </div>
                                    <div class="actions">
                                        <button type="submit" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Subscribe')) ?>" class="button"><span><span><?php echo $this->__('Subscribe') ?></span></span></button>
                                    </div>
                            </form>
                        </div>
                  </div>
            </div>
      </div>
</div>
<script type="text/javascript">    
//<![CDATA[
    var newsletterSubscriberFormDetail = new VarienForm('newsletter-popup-validate-detail', false);
     new Varien.searchForm('newsletter-popup-validate-detail', 'newsletter-email', '<?php echo $this->helper('newsletter')->__('Enter Your Email') ?>');
//]]>
</script>
Related Topic