Change form 'required' based on checkbox

[Chris Paschen]

I've got a form (part of a user profile plugin) with an sql field that users are, by default, required to complete.

When Joomla builds the form, for any required fields it adds:

class="required" required aria-required="true"

to the form item.

I have a checkbox on the form that, when checked, I need to make that SQL field NOT required. However, I'm not sure how to select that form item and change the attributes so that the field isn't required any longer.

This was my initial attempt, but it is not working:

    jQuery('#jform_profilecmd01_neworg').change(function () {
        if($this).is(':checked') {
            $('#jform_profilecmd01_customorg').removeAttr('required');
        } else {
            $('#jform_profilecmd01_customorg').attr('required');
        }
    });

Here is the snippet of the source code of the page with the form:

<fieldset id="profilecmd01_main"> <legend>Parish, School, Organization, Arch/Diocese</legend> <div class="control-group"> <div class="control-label"> <label id="jform_profilecmd01_customorg-lbl" for="jform_profilecmd01_customorg" class="hasTooltip required" title="&lt;strong&gt;Parish, School, Organization, Arch/Diocese&lt;/strong&gt;&lt;br /&gt;Select your parish/organization from the list. If you parish/organization is not listed, please complete the fields below"> Parish, School, Organization, Arch/Diocese<span class="star">&#160;*</span>
 </label>
 </div> <div class="controls"> <select id="jform_profilecmd01_customorg" name="jform[profilecmd01][customorg]" class="required" size="10" required aria-required="true"> <option value="">Please locate and select your parish/organization</option> <option value="zzz">My Parish/organization is not listed (I have already looked through the entire list)</option>
...etc

(You can view the actual page on the test site here: http://cmdtest.developmentsite.net/index.php/register-test)

I can't find any documentation specific to Joomla to help me, and nothing that I can find that is general (js/jquery) doesn't seem to work.

Anyone have any ideas or some sample code that you've written before that does this type of thing that you could share?

[Sergio Manzi]

Look here: http://stackoverflow.com/questions/3442322/jquery-checkbox-event-handling

I think you should use the click() handler (not change()) and correctly target the checkbox...

--
You received this message because you are subscribed to the Google Groups "Joomla! General Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-gene...@googlegroups.com.
To post to this group, send email to joomla-de...@googlegroups.com.
Visit this group at http://groups.google.com/group/joomla-dev-general.
For more options, visit https://groups.google.com/d/optout.

[seraphim]

Hi Chris, Sergio is right use click with a checkbox and change with radiobuttons. Also don't use the $ sign but jQquery to refer to the jquery library.

Chris Paschen schreef:

[Walt Sorensen]

Reading through some things recently, it seems like JForm allows an onchange or onclick event in most form field types. I believe you can use these attributes the same way you would use an HTML or JS onchange or onclick event.

Unfortunately I haven't found any good examples of this type of use. the CMS has one example of an onchange in a JForm xml definition in the core, https://github.com/joomla/joomla-cms/blob/c41fcf023012741e230acac6acbe956f5c275c41/installation/model/forms/preinstall.xml  but this single example doesn't fit your application. 

There might be other attributes like eventName, onSelect, onUpdate, showOthers, multiple, isChecked,  which are possibly available, but documentation and use examples are basically non-existent so I'm not sure if these apply properly in JForm.

[Chris Paschen]

OK .. I'm still hitting a brick wall.

I've placed the code within an on-click block that is already working.

Here's the present block of code:

 

   jQuery("#jform_profilecmd01_neworg").on('click', function(){
        jQuery("fieldset#profilecmd01_neworg").toggle();

             if(jQuery('#jform_profilecmd01_neworg').is(':checked')) {
                 jQuery('#jform_profilecmd01_customorg').removeAttr('required');
             } else {
                 jQuery('#jform_profilecmd01_customorg').attr('required');
             }
       
    });

As noted above, the on click was working; however, when I insert the if clause, it breaks the on-click function (the 'toggle' doesn't happen).

I'm pretty sure that I've just got a syntax error or that I'm just not understanding something (I sure hope that Joomla isn't somehow preventing jQuery from modifying the required attribute.


Also ... if anyone here is able to just get this working for me, I'd be more than happen to send you some $ to just fix the problems (or direct me know a good Joomla/Javascript coder that would be able to solve this.

I'm starting to get desperate to get this issue resolved.

[Chris Paschen]

Update, the form is NOT breaking now. (it was related to a template override).

However, the required attribute it still not working (despite the click IS working).

Hmmm ... is there a way to 'toggle' the attribute???

[Chris Paschen]

Well, if I wasn't already involved on the J! marketing team I think I'd want to get involved on the documentation team. There are so many things missing (or not updated for the current version).

I have tracked down what might have been some of the problems with this. I disabled the 'required' on the form (i.e. server-side validation), so that I can just handle this on client-side.
I've followed the docs to ensure that the form IS using client-side validation.

However, I now can't get the field to be required. There appears to be multiple different syntax throughout different J! docs. Some indicate specific J! versions, but none seem to work (with 3.4.3). The two that I've found the most are:

• jQuery('#jform_profilecmd01_customorg').prop('required',true);
  and

• jQuery('#jform_profilecmd01_customorg').attr('required');

However, neither seem to have any effect on the field.

I wish I knew of any extension that did this so that I could just take a look at that code.

If you have any code that does this (check-box requires/un-requires a field) please share the code.

Thanks

[Troy]

you haven't told it what to toggle.  put your toggle code inside the toggle ()
http://api.jquery.com/toggle/

Bear

--
You received this message because you are subscribed to the Google Groups "Joomla! General Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-gene...@googlegroups.com.
To post to this group, send email to joomla-de...@googlegroups.com.
Visit this group at http://groups.google.com/group/joomla-dev-general.
For more options, visit https://groups.google.com/d/optout.

No virus found in this message.
Checked by AVG - www.avg.com
Version: 2015.0.6081 / Virus Database: 4392/10300 - Release Date: 07/24/15

[Troy]

ok chris, so now what you want to do is add/remove the class "required" ( https://docs.joomla.org/Client-side_form_validation )  as your toggle via

.removeClass('required)

and

.addClass('required')

so either in .toggle() or if/else toggle that class for the field .xml element

Bear

--
You received this message because you are subscribed to the Google Groups "Joomla! General Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-gene...@googlegroups.com.
To post to this group, send email to joomla-de...@googlegroups.com.
Visit this group at http://groups.google.com/group/joomla-dev-general.
For more options, visit https://groups.google.com/d/optout.

No virus found in this message.
Checked by AVG - www.avg.com

Version: 2015.0.6081 / Virus Database: 4392/10305 - Release Date: 07/25/15

[Chris Paschen]

@Bear,

That ALMOST did it. Actually, that solved the 'on click' issue.

Now when I click the check box the required property is working properly.

The class is set to "required".

HOWEVER, just one last strangeness ...

When the form first opens the field needs to be required, so I added:

jQuery(document).ready(function() {
 
    //set initial parish selector required

    jQuery('#jform_profilecmd01_customorg').addClass('required');

However, now, when this code is added I get several new attributes added to the element:

class="required" aria-required="true" required="required"

And checking the box properly changes the class, but doesn't change the aria-required and required properties.

I've tried to set those with "... .prop('qria-required,false)" but that didn't help.
I also tried to addClass required, remove it, then add it again.

No matter what this line...

jQuery('#jform_profilecmd01_customorg').removeClass('required');

Seems to add those other properties ONLY when inside the if ... is(:checked') area.

Here's the updated code (without the attempts to reset the other properties):

jQuery(document).ready(function() {

    //new org items
    jQuery("fieldset#profilecmd01_neworg").hide();


    //new master org items
    jQuery("fieldset#profilecmd01_newmaster").hide();
   
    //set initial parish selector required

    jQuery('#jform_profilecmd01_customorg').addClass('required');
       
    // handle the 'my org not listed' checkbox

    jQuery("#jform_profilecmd01_neworg").on('click', function(){
        jQuery("fieldset#profilecmd01_neworg").toggle();
       
       
         if(jQuery('#jform_profilecmd01_neworg').is(':checked')) {

             jQuery('#jform_profilecmd01_customorg').removeClass('required');
         } else {
             jQuery('#jform_profilecmd01_customorg').addClass('required');
         }
       
    });

    //handle the 'my master org not listed' checkbox
    jQuery("#jform_profilecmd01_newmasterorg").on('click', function(){
        jQuery("fieldset#profilecmd01_newmaster").toggle();
    });
});


SO close but still not working yet.

Any ideas why that line of code to addClass required works fine within the if clause, but not outside of that?

[Troy]

jQuery('#jform_profilecmd01_customorg').toggleClass('required');

Bear

--
You received this message because you are subscribed to the Google Groups "Joomla! General Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-gene...@googlegroups.com.
To post to this group, send email to joomla-de...@googlegroups.com.
Visit this group at http://groups.google.com/group/joomla-dev-general.
For more options, visit https://groups.google.com/d/optout.

No virus found in this message.
Checked by AVG - www.avg.com

Version: 2015.0.6081 / Virus Database: 4392/10312 - Release Date: 07/26/15

[Chris Paschen]

@Bear -
Same results - for some reason whenever you set something to 'required' class outside of the IF clause it adds those other 2 properties, and I can't seem to find a way to remove them (or re-set them).

However, I do like the ToggleClass option - if allowed me to basically remove the if clause on the check box - just allowing to 'toggle' the required whenever checked.

I sure wish I knew where this soft of thing was documented.

[Troy]

with the toggle class you dont' need the if/else its one or the other.  imo just use the toggle class

Bear

[Chris Paschen]

Sorry, I wasn't clear on that ... I should have said that the problem is outside the 'click' function block.

So, within the click function  -   .on('click', function() ...
The .toggleClass is working fine.

However, I need to initially set the field as required.
To ensure that it is initially set to 'required' I have been using the addClass('requires') (I don't want to use 'toggle' and take a chance that for some reason it might already be set to required and the initial code would un-set it).

The problem is that using:

jQuery('jform_profilecmd01_customorg').addClass('required');

Isn't working. It is adding additional properties that are keeping the field 'required' when submitted.

The 'addClass' results in this:

<select id="jform_profilecmd01_customorg" class="required" size="10" name="jform[profilecmd01][customorg]" aria-required="true" required="required">

the onClick (toggleClass) then results in this:

<select id="jform_profilecmd01_customorg" class="" size="10" name="jform[profilecmd01][customorg]" aria-required="true" required="required">

and then clicking the submit form results in this:

<select id="jform_profilecmd01_customorg" class="invalid" size="10" name="jform[profilecmd01][customorg]" aria-required="true" required="required" aria-invalid="true">

So the problem is that the addClass (and the toggleClass - when it is toggling the 'required' class on) not only adds the class, but also aria-required and required attributes. And the toggleClass doesn't seem to remove those other things.
(This sure seems like a bug or just some short-sighted coding)

[Chris Paschen]

OK ... after spending WEEKS on this (what seemed to be a minor) project, it is FINALLY working.

For anyone who is following this (or stumbles upon this later with the same problem/need), here is the final js file code that worked:

jQuery(document).ready(function()
{

    //set initial parish selector required

        //set the 'functional' requirements by adding the required class

        jQuery("#jform_profilecmd01_customorg").addClass("required");

   
    //new org items

    jQuery("fieldset#profilecmd01_neworg").hide();

    //new master org items
    jQuery("fieldset#profilecmd01_newmaster").hide();

     

    // handle the 'my org not listed' checkbox

    jQuery("#jform_profilecmd01_neworg").on('click', function()
    {
        jQuery("fieldset#profilecmd01_neworg").toggle();

        jQuery("#jform_profilecmd01_customorg").toggleClass("required");
       
           if(jQuery('#jform_profilecmd01_neworg').is(':checked')) {

            jQuery('#jform_profilecmd01_customorg').removeClass('required');

            jQuery('#jform_profilecmd01_customorg').attr("aria-required","false");
            jQuery('#jform_profilecmd01_customorg').prop("required",false);
        } else {

            jQuery('#jform_profilecmd01_customorg').toggleClass('required');

            jQuery('#jform_profilecmd01_customorg').attr("aria-required","true");

            jQuery('#jform_profilecmd01_customorg').prop('required',true);
        }

    });

    //handle the 'my master org not listed' checkbox
    jQuery("#jform_profilecmd01_newmasterorg").on('click', function()
    {
        jQuery("fieldset#profilecmd01_newmaster").toggle();
    });
});

THANK YOU to everyone that helped in this.

Now I have to figure out where I can (more clearly) document this entire process to help save others lots of time and frustration.

[Troy]

you can probably remove this first toggle since its being handled by the if / else

Bear