jQuery not working

[raaman_rai]

can anybody post some code for form validation in the frontend using jQuery.

i have followed all the instructions in the jquery documentation but it doesn't work with the joomla form.

[toivo]

Which particular form are you working with?

[raaman_rai]

Which particular form are you working with?

i am creating a component of my own, so i have my own form created. my code looks like below and its just for testing purpose:

Code: Select all

<?php
defined('_JEXEC') or die('Restricted access'); 
?>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript">
/*Joomla.submitbutton = function(task)
{
    if (task == 'cancel' || document.formvalidator.isValid(document.id('adminForm'))) {
         Joomla.submitform(task, document.getElementById('adminForm'));
    } else {
         alert('Highlighted fields are missing');
    }
}*/
$jQuery("#adminForm").validate({
	rules: {
		"name":{
			required:true,
			maxlength:500
			}
 
	},
	  messages: {
		  "name" : {
			  required:  "Hey, please enter ur name"
			  }
	  }
</script>
<form method="POST" name="adminForm" id="adminForm">
<fieldset>
<legend>Personal Details</legend>
<table>
    <tr>
        <td><label for="name">Name *</label></td>
        <td><input type="text" name="name" id="name"/></td>       
    </tr>    
    <tr>
        <td colspan="2"><input type="submit" value="Submit" class="submit" name="submit"></td>
    </tr>	
</table>  
</fieldset>           
<input type="hidden" name="option" value="<?php echo JRequest::getVar( 'option' );?>"/>
<input type="hidden" name="task" value="save"/>
<input type="hidden" name="view" value="form"/>
<?php echo JHTML::_( 'form.token' ); ?>	
</form>

The validation do not work as it suppose to. Where am i going wrong sir?

[bbolli]

Quick thing to check: use any browsers web developer tools to verify if Joomla is also loading the MooTools framework, as it and jQuery both use the $. If so, there are a variety of techniques using jQuery's noConflict() function.

Also, while you have the developer tools open check out the console log to verify their aren't any errors.

[raaman_rai]

Quick thing to check: use any browsers web developer tools to verify if Joomla is also loading the MooTools framework, as it and jQuery both use the $. If so, there are a variety of techniques using jQuery's noConflict() function.

Also, while you have the developer tools open check out the console log to verify their aren't any errors.

The browser is loading mootools as well as the jquery(you can see the page source image attached). The noConflict() mode is cofigured as i am using jQuery Library Plugin.

Still then i cannot make it work. I'm tired of this now. Its quite frustrating as i have tried everything given in the net.

[kamilg]

Example:
JToolbar has 3. buttons:

Code: Select all

JToolBarHelper::apply('payment.apply');
JToolBarHelper::save('payment.save');
JToolBarHelper::cancel('payment.cancel');

Example Form:

Code: Select all

<form method="post" action="index.php" name="adminForm" id="my_form">
   <div>
         <label forr="name_inp">Your name:</label>
         <input type="text" name="name" id="name_inp" value="" />
      </div>
      //other fields...
</form>

Javascript:

Code: Select all

Joomla.submitbutton = function(task)
{
        if (task == '')
        {
                return false;
        }
        else
        {
                var isValid=true;
                var action = task.split('.');
                if (action[1] != 'cancel' && action[1] != 'close')
                {
                        // validate forms
                        jQuery("form#my_form").submit();
                }
 
                
        }
        return false;
    
}

jQuery(document).ready(function()
{
     jQuery("form#my_form").validate({
        errorClass: "form_error_input",
        successClass: "form_ok_input",
        focusInvalid: true,
        rules:
        {
           "name" :
            {
                 required: true,
                 minlength: 5,
                 maxlength: 255
             }
        }
     });
});

[raaman_rai]

Example:
JToolbar has 3. buttons:

Code: Select all

JToolBarHelper::apply('payment.apply');
JToolBarHelper::save('payment.save');
JToolBarHelper::cancel('payment.cancel');

Example Form:

Code: Select all

<form method="post" action="index.php" name="adminForm" id="my_form">
   <div>
         <label forr="name_inp">Your name:</label>
         <input type="text" name="name" id="name_inp" value="" />
      </div>
      //other fields...
</form>

Javascript:

Code: Select all

Joomla.submitbutton = function(task)
{
        if (task == '')
        {
                return false;
        }
        else
        {
                var isValid=true;
                var action = task.split('.');
                if (action[1] != 'cancel' && action[1] != 'close')
                {
                        // validate forms
                        jQuery("form#my_form").submit();
                }
 
                
        }
        return false;
    
}

jQuery(document).ready(function()
{
     jQuery("form#my_form").validate({
        errorClass: "form_error_input",
        successClass: "form_ok_input",
        focusInvalid: true,
        rules:
        {
           "name" :
            {
                 required: true,
                 minlength: 5,
                 maxlength: 255
             }
        }
     });
});

Thankyou for your reply but here in your example you have used Toolbar buttons which is usually not used in frontend. Instead i have used normal html buttons for the form to submit. My page looks like below:

Code: Select all

<?php
defined('_JEXEC') or die('Restricted access'); 
//JHTML::_('behavior.calendar');
//JHtml::_('behavior.tooltip');
//JHTML::_('behavior.formvalidation');
//JHTML::_('behavior.mootools');
?>
<style>
.invalid 
{
   color:red;
   border-color: red
}
</style>
<script type="text/javascript">
Joomla.submitbutton = function(task)
{
        if (task == '')
        {
                return false;
        }
        else
        {
                var isValid=true;
                var action = task.split('.');
                if (action[1] != 'cancel' && action[1] != 'close')
                {
                        // validate forms
                        jQuery("#adminForm").submit();
                }
 
               
        }
        return false;
   
}

jQuery(document).ready(function()
{
     jQuery("#adminForm").validate({
        errorClass: "invalid",
        successClass: "valid",
        focusInvalid: true,
        rules:
        {
           "name" :
            {
                 required: true,
                 minlength: 5,
                 maxlength: 255
             }
        }
     });
});

</script>
<form method="POST" action="index.php" name="adminForm" id="adminForm">
Personal Details
<table>
    <tr>
        <td><label for="name">Name *</label></td>
        <td><input type="text" name="name" id="name" value=""></td>       
    </tr>    
    <tr>
        <td colspan="2">
		   <button value="Submit" name="submit">Submit</button>
		   <button value="Cancel" name="cancel">Cancel</button>
		</td>
    </tr>	
</table>             
<input type="hidden" name="option" value="<?php echo JRequest::getVar( 'option' );?>"/>
<input type="hidden" name="task" value="save"/>
<input type="hidden" name="view" value="form"/>
<?php echo JHTML::_( 'form.token' ); ?>	
</form>

Nothing happens and the form gets submitted without filling the input. Can you go through it and advice me anything?

[kamilg]

Path to jQuery library, and validation lib is correct ?
Firebug don't have any errors ?
Replace <button> on <input type="submit" ... /> .


Try this:

Code: Select all

<?php
defined('_JEXEC') or die('Restricted access'); 
//JHTML::_('behavior.calendar');
//JHtml::_('behavior.tooltip');
//JHTML::_('behavior.formvalidation');
//JHTML::_('behavior.mootools');
?>
<style>
.invalid 
{
   color:red;
   border-color: red
}
</style>
<script type="text/javascript">
jQuery(document).ready(function()
{
     jQuery("#adminForm").validate({
        errorClass: "invalid",
        successClass: "valid",
        focusInvalid: true,
        rules:
        {
           "name" :
            {
                 required: true,
                 minlength: 5,
                 maxlength: 255
             }
        }
     });
});

</script>
<form method="POST" action="index.php" name="adminForm" id="adminForm">
Personal Details
<table>
    <tr>
        <td><label for="name">Name *</label></td>
        <td><input type="text" name="name" id="name" value=""></td>       
    </tr>    
    <tr>
        <td colspan="2">
		   <input type="submit" value="Submit" name="submit" />
		   <input type="submit" value="Cancel" name="submit" />
		</td>
    </tr>	
</table>             
<input type="hidden" name="option" value="<?php echo JRequest::getVar( 'option' );?>"/>
<input type="hidden" name="task" value="save"/>
<input type="hidden" name="view" value="form"/>
<?php echo JHTML::_( 'form.token' ); ?>	
</form>

If above code doesn't run, add this code:

Code: Select all

jQuery(document).ready(function()
{
    jQuery("#adminForm").submit(function()
    {
           alert("Form submit!");
    });
}); 

[raaman_rai]

Thankyou kamilg, finally it worked. the code in the last post did not require any changes. i only had to include the validation library in the page.

Many many thanks onceagain, now i feel i can work with jquery too in joomla.