make field required on condition of other field

[cpaschen]

I have an admin view that has fields like this:

Field A - radio (yes/no)
Field A1 - custom, multi-select
Field A2 - custom, multi-select
Field A3 - custom, multi-select

Field B - radio (yes/no)
Field B1 - custom, multi-select
Field B2 - custom, multi-select
Field B3 - custom, multi-select

None of these fields are 'required'.

HOWEVER, IF the user sets Field A to YES, then Field A1, A2, A3 all need to become required.
Similar if Field B is set to YES, then Fields B1, B2, B3 all need to become required.
And if they set either of these fields back to NO, then the respective 1,2,3 fields need to be re-set to NOT required.

This all needs to be done within the browser (i.e. JS code) on the front-end (although should also work on the admin).

I have NO IDEA how to go about this.

Can anyone point me in the right direction?

[duetnet]

Hi Chris I guess I would write some JS code for the ONCHANGE functionality of FIELDA which changes the other FIELD’s attributes to required/not required… And the same for each field, or call a common function from each onchange which checks the values/attributes of the other fields and changes the attributes. Franz From: Chris Paschen ***@***.***> Sent: Friday, 03 December 2021 05:52 To: vdm-io/Joomla-Component-Builder ***@***.***> Cc: Subscribed ***@***.***> Subject: [vdm-io/Joomla-Component-Builder] make field required on condition of other field (Discussion #835) I have an admin view that has fields like this: Field A - radio (yes/no) Field A1 - custom, multi-select Field A2 - custom, multi-select Field A3 - custom, multi-select Field B - radio (yes/no) Field B1 - custom, multi-select Field B2 - custom, multi-select Field B3 - custom, multi-select None of these fields are 'required'. HOWEVER, IF the user sets Field A to YES, then Field A1, A2, A3 all need to become required. Similar if Field B is set to YES, then Fields B1, B2, B3 all need to become required. And if they set either of these fields back to NO, then the respective 1,2,3 fields need to be re-set to NOT required. This all needs to be done within the browser (i.e. JS code) on the front-end (although should also work on the admin). I have NO IDEA how to go about this. Can anyone point me in the right direction? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#835> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALIFNZ7W4HMOCIS5B6CSCDTUPA5FTANCNFSM5JIXTXJA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> . <https://github.com/notifications/beacon/ALIFNZ3DA5YSQCMXTYOX3UTUPA5FTA5CNFSM5JIXTXJKYY3PNVWWK3TUL52HS4DFVJCGS43DOVZXG2LPN2VGG33NNVSW45C7NFSM4ABYYRCA.gif>

[cpaschen]

ANYone have any sample code (or instructions for JCB) showing how to make this work in JCB?
I'm stuck with getting a form to properly function as needed.
Can't find anything in the JCB wiki or videos :-(

[cpaschen]

On the radio field (controlling field - Field A in example above) I've added (via JCB field editing):

onchange="setFictionEnjoy"

And in the admin view - Javascript - Javascript (edit view file) area I've added:

function setFictionEnjoy() {
var x = document.getElementById("jform_fiction").value;
if (x == 1) {
document.getElementById("jform_fiction_categories_favorite-lbl").classList.add('required');
document.getElementById("jform_fiction_categories_favorite").classList.add('required');
} else {
document.getElementById("jform_fiction_categories_favorite-lbl").classList.remove('required');
document.getElementById("jform_fiction_categories_favorite").classList.remove('required');
}
}

However, it doesn't appear to have any effect. Class isn't added to the fields.

Not sure where to go next.

[cpaschen]

Are there any sample JCB projects that have any js validation or doing anything close to this that I could look at to see how to get this implemented?

BTW ... this is actually an old request. I asked this back on the old JCB q&a forum but never got a solution there either.
Someone else MUST be using JCB with edit forms that you need to have js validate or modify based on user actions.

[SimonvanDoorne]

Maybe i'm not reading it right but setting fields required doesn't work with a class. There is the html tag 'required' that needs to be set, either without value or with (doesn't matter as long as the attribute is set). So in JS that would be document.getElementById("jform_fiction_categories_favorite").setAttribute('required', 'required').

For the label you not only need to add the class to required but also hide the little star that's there by default if the field is required. In native JS i haven't found a single prebuilt function but it's not too difficult to make an if statement which checks if the class 'required' is added to the label and shows/hides accordingly.

[SimonvanDoorne]

Just tested it locally and confirmed document.getElementById("jform_fiction_categories_favorite").setAttribute('required', 'required') will work. The little star does not appear if you don't put it there, but the field got a red outline and the form won't validate unless the field is filled.

[TLWebdesign]

I've used this code below for a similar scenario.

jQuery( document ).ready(function() 
{
	if (jQuery("#jform_beschikbaarheid input[type='radio']:checked").val() == 3)
	{
		jQuery('#jform_vanafdatum').attr('required',true);
		console.log('required set');
	}
});
jQuery('#jform_beschikbaarheid').on('change', function() 
{
	if (jQuery("#jform_beschikbaarheid input[type='radio']:checked").val() == 3)
	{
		jQuery('#jform_vanafdatum').attr('required',true);
		console.log('required set');
	} else {
		jQuery('#jform_vanafdatum').attr('required',false);
		jQuery('#jform_vanafdatum').val('');
		jQuery('#jform_vanafdatum').attr('value','');
		jQuery('#jform_vanafdatum').attr('data-alt-value','');
		jQuery('#jform_vanafdatum').attr('data-local-value','');
		console.log('required removed and value reset');
	}
});

[cpaschen]

Thanks to everyone that helped out. Using snippets from several responses (and a few others online I found), here's the final solution that worked, at least for my usecase.
[This code was placed in the 'admin_view.javascript_view_footer' area.]

//update Favorite Fiction Categories and Favorite Fiction Genres ('fiction_categories_favorite' & fiction_genres_favorite - i.e. A1,A2) required fields when Fiction ('fiction' i.e. A) option changed
jQuery('#jform_fiction').on('click', function()
{
    console.log('fiction clicked');
    var fictionStatus = jQuery("#jform_fiction0[type='radio']:checked").val();
    //console.log(jQuery("#jform_fiction0[type='radio']:checked").val());
	console.log(fictionStatus);

    if (fictionStatus == 1)
    {
        console.log('radio checked - val 1');
        // set Favorite Fiction Categories Required
        jQuery('#jform_fiction_categories_favorite').attr('required', "required");
        jQuery('#jform_fiction_categories_favorite').attr('aria-required', "true");
        jQuery('#jform_fiction_categories_favorite').attr('required', true);
        // Set Favorite Fiction Genres Required
        jQuery('#jform_fiction_genres_favorite').attr('required', "required");
        jQuery('#jform_fiction_genres_favorite').attr('aria-required', "true");
        jQuery('#jform_fiction_genres_favorite').attr('required', true);
        // add required * indicator
        var GenreLabel = document.getElementById('jform_fiction_genres_favorite-lbl');
        GenreLableText = GenreLabel.textContent;
        if (GenreLableText.slice(-1) != "*") {
            GenreLabel.textContent = GenreLabel.textContent + '*';
        }
        var CatLabel   = document.getElementById('jform_fiction_categories_favorite-lbl');
        CatLabelText = CatLabel.textContent;
        if (CatLabelText.slice(-1) != "*") {
            CatLabel.textContent = CatLabel.textContent + '*';
        }
        console.log('required set');
    } else {
        //set Favorite Fiction Categories NOT Required
        jQuery('#jform_fiction_categories_favorite').attr('required', false);
        jQuery('#jform_fiction_categories_favorite').attr('aria-required', "false");
        jQuery('#jform_fiction_categories_favorite').removeAttr("required");
        // Set Favorite Fiction Genres NOT Required
        jQuery('#jform_fiction_genres_favorite').removeAttr("required");
        jQuery('#jform_fiction_genres_favorite').attr('aria-required', "false");
        jQuery('#jform_fiction_genres_favorite').attr('required', false);
        
	    // remove required * indicator
        var GenreLabel = document.getElementById('jform_fiction_genres_favorite-lbl');
        GenreLabeltext = GenreLabel.textContent
        if (GenreLabeltext.slice(-1) == "*") {
            GenreLabel.textContent = GenreLabel.textContent.substring(0, GenreLabel.textContent.length - 1);
        }
        var CatLabel = document.getElementById('jform_fiction_categories_favorite-lbl');
        CatLabeltext = CatLabel.textContent
        if (CatLabeltext.slice(-1) == "*") {
            CatLabel.textContent = CatLabel.textContent.substring(0, CatLabel.textContent.length - 1);
        }
        console.log('required removed and value reset');
    }
    updatePreferedType();
});

NOTE: In addition to setting the fields required, I also manually added/removed the "*" required indicator.
ALSO, when the Fiction (A) is set to NO, then these are all reversed.

Hope that helps someone else running into this.

BTW ... this needs to be added to the javascript_view_footer area. It can not be added to the external .js file for the view.

Thanks for all the help.