Magento – Form validation is not working

formsjavascriptprototype-jsvalidation

I have looked at various tutorials and they all say that to get form validation working in magento is as simple as setting the correct class in the input boxes and adding the form name to the VarienForm() function.

I am not getting anything with this method:

<form name="regform" id="regform" action="<?php echo Mage::getUrl('*/*/save') ?>" method="post">
        <div class="row">
            <?php echo $this->getMessagesBlock()->getGroupedHtml(); ?>
            <div class="large-12 columns">
                <label class="required" class="required" class="required" for="first name"><?php echo $this->__('First name') ?><span>*</span></label>
                <input type="text" name="f_name" id="f_name" value="<?php echo $this->getRequest()->getParam('f_name') ?>" class="input-text required-entry">
            </div>
        </div>
        <div class="row">
            <div class="large-12 columns">
                <label for="last name"><?php echo $this->__('Last Name') ?><span>*</span></label>
                <input type="text" name="l_name" id="l_name" value="<?php echo $this->getRequest()->getParam('l_name') ?>" class="input-text required-entry">
            </div>
        </div>
</form>

<script type="text/javascript">
        //<![CDATA[
            var dataForm = new VarienForm('regform', true);
        //]]
</script>

My javascript is very weak, so I have been blindly following tutorials, I have gone taken some time to learn more Javascript but my limited time spent understanding the language leaves me thinking this should work. Where am I going wrong?

===EDIT===

In the console, I get the following message

Uncaught TypeError: Object [object Object] has no method 'attachEvent' prototype.js:5653
Uncaught TypeError: Object [object Object] has no method 'attachEvent' prototype.js:5653
Uncaught TypeError: Object [object Object] has no method 'attachEvent' prototype.js:5653
Uncaught TypeError: Object [object Object] has no method 'dispatchEvent' prototype.js:5734

Best Answer

This error occurs because of the conflict between prototype and jQuery libraries. To solve this, add jQuery.noConflict(); at the end of jQuery library.

This will solve the conflict.

Related Topic