Joomla Mootools validation.js validate radio button file

billengle · **Joined:** Thu Apr 30, 2009 6:21 pm **Posts:** 78

I am trying to validate a form that has a few sets of radio buttons and a file field. However adding class="required" does not work. If I use text field validation does actually occur.

I have been trying to follow this guide:
http://docs.joomla.org/Form_validation

But it seems that only text field is supported. Am I reading this correctly?

billengle · **Joined:** Thu Apr 30, 2009 6:21 pm **Posts:** 78

I found the BF Validate Plug-in which allows validation of radio buttons so my guess is Joomla can't do it with mootools without this plug-in. Now only if this would work...

http://extensions.joomla.org/extensions/contacts-&-feedback/forms/6230/details

billengle · **Joined:** Thu Apr 30, 2009 6:21 pm **Posts:** 78

Has anyone used this and gotten it to work or have another solution?

I am following the example exactly and it still skips the validation of radio buttons.

billengle · **Joined:** Thu Apr 30, 2009 6:21 pm **Posts:** 78

I ended up writing my own script to validate radio and file input types. Not sure why I couldn't at least get radio working with the third party extension.

billengle · **Joined:** Thu Apr 30, 2009 6:21 pm **Posts:** 78

Figured out that there was a coding issue with the BF Validate extension so I fixed it and alerted the developer.

This is an issue I had back in May and decided to scrap using BFValidate. With a new project I decided to give it a shot but failed again so I decided to debug. Note I am not using any other BF products. This is a custom component that has a form.

Issue description.
If a group of radio buttons had values set prior to form submission but not actually selected then the form would validate. Not good. The only way around this was to not set a value for the value tag. Also not good because even though the form validated the post value for the radio button set was NULL!

Solution.
The following code allows radio buttons to have values set and on form submission the actual value of the selected radio button is posted. GOOD!! We can actually use radio button data now.

Code:

// line 136 of bfvalidate.js
   validate: function(el)
   {
      // If the field is required make sure it has a value
      if(!(el.getProperty('type') == "radio" || el.getProperty('type') == "checkbox")){
          if ($(el).hasClass('required')) {
             if (!($(el).getValue())) {
                this.handleResponse(false, el);
                return false;
             }
          }
      }
      
      // Only validate the field if the validate class is set
      var handler = (el.className && el.className.search(/validate-([a-zA-Z0-9\_\-]+)/) != -1) ? el.className.match(/validate-([a-zA-Z0-9\_\-]+)/)[1] : "";      
      if (handler == '') {
         this.handleResponse(true, el);
         return true;
      }

      // Check the additional validation types
      // Individual radio & checkbox can have blank value, providing one element in group is set
      if(!(el.getProperty('type') == "radio" || el.getProperty('type') == "checkbox")){
         if ((handler) && (handler != 'none') && (this.handlers[handler]) && $(el).getValue()) {
            // Execute the validation handler and return result
            if (this.handlers[handler].exec($(el).getValue()) != true) {
               this.handleResponse(false, el);
               return false;
            }
         }
      } else {
         if ((handler) && (handler != 'none') && (this.handlers[handler])) {
            if(el.getProperty('type') == "radio" || el.getProperty('type') == "checkbox"){
               if (this.handlers[handler].exec(el.parentNode) != true) {
               this.handleResponse(false, el);
               return false;
               }
            }
         }
      }

      // Return validation state
      this.handleResponse(true, el);
      return true;
   },

flash45 · **Joined:** Fri Nov 06, 2009 7:02 am **Posts:** 4

I am also having issues getting it to work.

I used your code but still couldn't get it to work. I altered the registration default.php file to include the checkbox (per BF's website ) placed the script just under the exsisting script (in it's own tags) and replaced the javascript code as you directed in the bfvalidate.js file.

The form will not validate the checkbox nor allow registration.

Any additional help is greatly appreciated, such as code examples for the default.php file.

billengle · **Joined:** Thu Apr 30, 2009 6:21 pm **Posts:** 78

I just tested checkbox input type and it worked as expected. Have you been able to get at least a text field to validate?

Make sure you have id property correct and are using the label element.

Layout

Code:

<form id="test-form" class="form-validate" onsubmit="formValidate();">
<label for="checkbox_test">Checkbox Test</label><input type="checkbox" class="required validate-checkbox" name="checkbox_test" id="checkbox_test" value="Test" />
<input type="submit" />
</form>

CSS - this highlights the label and the field (not the checkbox though).

Code:

/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }

JS

Code:

   
// this function is called when I need to validate a form.  You could also check the token in the first IF before the return true.
var formValidate = function(form, msg) {
      if (document.formvalidator.isValid(form)) {
         return true; 
      }
      else {
         alert(msg);
      }
       return false;
   };

Entry Point/View

Code:

BFBehavior::formbfvalidation();

BFValidate.js - lines 136 to 179. Just double check this.

Code:

   validate: function(el)
   {
      // If the field is required make sure it has a value
      if(!(el.getProperty('type') == "radio" || el.getProperty('type') == "checkbox")){
          if ($(el).hasClass('required')) {
             if (!($(el).getValue())) {
                this.handleResponse(false, el);
                return false;
             }
          }
      }
      
      // Only validate the field if the validate class is set
      var handler = (el.className && el.className.search(/validate-([a-zA-Z0-9\_\-]+)/) != -1) ? el.className.match(/validate-([a-zA-Z0-9\_\-]+)/)[1] : "";      
      if (handler == '') {
         this.handleResponse(true, el);
         return true;
      }

      // Check the additional validation types
      // Individual radio & checkbox can have blank value, providing one element in group is set
      if(!(el.getProperty('type') == "radio" || el.getProperty('type') == "checkbox")){
         if ((handler) && (handler != 'none') && (this.handlers[handler]) && $(el).getValue()) {
            // Execute the validation handler and return result
            if (this.handlers[handler].exec($(el).getValue()) != true) {
               this.handleResponse(false, el);
               return false;
            }
         }
      } else {
         if ((handler) && (handler != 'none') && (this.handlers[handler])) {
            if(el.getProperty('type') == "radio" || el.getProperty('type') == "checkbox"){
               if (this.handlers[handler].exec(el.parentNode) != true) {
               this.handleResponse(false, el);
               return false;
               }
            }
         }
      }

      // Return validation state
      this.handleResponse(true, el);
      return true;
   },

flash45 · **Joined:** Fri Nov 06, 2009 7:02 am **Posts:** 4

Thanks for your quick reply. I am not very good with modifying js so I thank you in advance for your patience.

I should have clarified. I am using the native Joomla Log In/Register module.

The form page is here:

Code:

<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<script type="text/javascript">
<!--
   Window.onDomReady(function(){
      document.formvalidator.setHandler('passverify', function (value) { return ($('password').value == value); }   );
   });
// -->
</script>
<script language="javascript">
function myValidate(f) {
 if (document.formvalidator.isValid(f)) {
  f.check.value='';//send token
  return true;
 }
 else {
  alert('Some values are not acceptable.  Please retry.');
 }
 return false;
}
</script>
<?php
   if(isset($this->message)){
      $this->display('message');
   }
?>

<form action="<?php echo JRoute::_( 'index.php?option=com_user' ); ?>" method="post" id="josForm" name="josForm" class="form-validate" onSubmit="return myValidate(this);">

<?php if ( $this->params->def( 'show_page_title', 1 ) ) : ?>
<div class="componentheading<?php echo $this->escape($this->params->get('pageclass_sfx')); ?>"><?php echo $this->escape($this->params->get('page_title')); ?></div>
<?php endif; ?>

<table cellpadding="0" cellspacing="0" border="0" width="100%" class="contentpane">
<tr>
   <td width="30%" height="40">
      <label id="namemsg" for="name">
         <?php echo JText::_( 'Name' ); ?>:
      </label>
   </td>
     <td>
        <input type="text" name="name" id="name" size="40" value="<?php echo $this->escape($this->user->get( 'name' ));?>" class="inputbox required" maxlength="50" /> *
     </td>
</tr>
<tr>
   <td height="40">
      <label id="usernamemsg" for="username">
         <?php echo JText::_( 'User name' ); ?>:
      </label>
   </td>
   <td>
      <input type="text" id="username" name="username" size="40" value="<?php echo $this->escape($this->user->get( 'username' ));?>" class="inputbox required validate-username" maxlength="25" /> *
   </td>
</tr>
<tr>
   <td height="40">
      <label id="emailmsg" for="email">
         <?php echo JText::_( 'Email' ); ?>:
      </label>
   </td>
   <td>
      <input type="text" id="email" name="email" size="40" value="<?php echo $this->escape($this->user->get( 'email' ));?>" class="inputbox required validate-email" maxlength="100" /> *
   </td>
</tr>
<tr>
   <td height="40">
      <label id="pwmsg" for="password">
         <?php echo JText::_( 'Password' ); ?>:
      </label>
   </td>
     <td>
        <input class="inputbox required validate-password" type="password" id="password" name="password" size="40" value="" /> *
     </td>
</tr>
<tr>
   <td height="40">
      <label id="pw2msg" for="password2">
         <?php echo JText::_( 'Verify Password' ); ?>:
      </label>
   </td>
   <td>
      <input class="inputbox required validate-passverify" type="password" id="password2" name="password2" size="40" value="" /> *
   </td>
</tr>
<tr>
   <td>
       <label id="tos" for="tos2">
         <?php echo JText::_( 'I have read the Terms of Service' ); ?>:
      </label>
    </td>
    <td>
        <input type="checkbox" id="tos2" name="tos2" size="40" value="" <?php echo 'class="required validate-checkbox"'; ?>/>{source}<a href="http://mydomain.com/index.php?option=com_content&view=article&id=5&Itemid=5" target="_blank"> I have agreed to the Terms of Service.</a>{/source}
    </td>
</tr>
<tr>
   <td colspan="2" height="40">
      <?php echo JText::_( 'REGISTER_REQUIRED' ); ?>
   </td>
</tr>
</table>
   <button class="button validate" type="submit"><?php echo JText::_('Register'); ?></button>
   <input type="hidden" name="task" value="register_save" />
   <input type="hidden" name="id" value="0" />
   <input type="hidden" name="gid" value="0" />
   <?php echo JHTML::_( 'form.token' ); ?>
</form>

you can see I've added the BF Validate script on the top, under the forms validator script.

Added checkbox:

Code:

<tr>
   <td>
       <label id="tos" for="tos2">
         <?php echo JText::_( 'I have read the Terms of Service' ); ?>:
      </label>
    </td>
    <td>
        <input type="checkbox" id="tos2" name="tos2" size="40" value="" <?php echo 'class="required validate-checkbox"'; ?>/>{source}<a href="http://mydomain.com/index.php?option=com_content&view=article&id=5&Itemid=5" target="_blank"> I have agreed to the Terms of Service.</a>{/source}
    </td>
</tr>

The form tag already had an action so I added the onSubmit at the end:

Code:

<form action="<?php echo JRoute::_( 'index.php?option=com_user' ); ?>" method="post" id="josForm" name="josForm" class="form-validate" onSubmit="return myValidate(this);">

I am not sure where to put:

Code:

BFBehavior::formbfvalidation();

Also do I place this in it's own script tag? Should it be at the beginning of the page?

Code:

// this function is called when I need to validate a form.  You could also check the token in the first IF before the return true.
var formValidate = function(form, msg) {
      if (document.formvalidator.isValid(form)) {
         return true;
      }
      else {
         alert(msg);
      }
       return false;
   };

I checked the js code from line 136 and I cut and pasted that right, woo, 1 out of 4

Thanks again for taking time to help.

billengle · **Joined:** Thu Apr 30, 2009 6:21 pm **Posts:** 78

In your form use the label and change

Code:

<input type="checkbox" id="tos2" name="tos2" size="40" value="" <?php echo 'class="required validate-checkbox"'; ?>/>

to

Code:

<label for="tos2">TOS</label><input type="checkbox" id="tos2" name="tos2" size="40" class="required validate-checkbox" />

Put this in your template's CSS file

Code:

/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }

Add

Code:

BFBehavior::formbfvalidation();

to com_user/user.php file (entry point) towards the top.

The JS can go in script tags at top or in a separate file. If in a separate file you will need to addscript.

That should get you in the right direction. Otherwise it sounds like you are hacking core files which I wouldn't recommend. You should probably check out some registration extensions. A good amount have TOS checkboxes.

billengle · **Joined:** Thu Apr 30, 2009 6:21 pm **Posts:** 78

This extension should do the trick and its free. I have used it before.

http://extensions.joomla.org/extensions ... ation/7727

flash45 · **Joined:** Fri Nov 06, 2009 7:02 am **Posts:** 4

That's excatly what I was looking for and it works great.

Thanks!

Joomla! Discussion Forums

Joomla Mootools validation.js validate radio button file

Quick reply

Who is online