Change field required attribute via jQuery

PHPMaker General Discussion (PHPMaker)
1

How can I change a field required attribute using jquery ?
I want to know if a required field is automatically not required just by hiding it or hidding his parent div ?
I use this jquery code for that :

function mask_etabp_redoublee_id(){
        if($("#x_etabp_redoublement").val() == "Y"){
            $(".etabp_classe_redoublee_id").show();
        } else {
            $(".etabp_classe_redoublee_id").hide();
        }
    }

My $(“#x_etabp_classe_redoublee_id”) is in a div $(“.etabp_classe_redoublee_id”). By hiding this div, is my field $(“#x_etabp_classe_redoublee_id”) automatically not required or should I handle requierement by code ?

2

You should not set the field as required in such case, you better use client side Form_CustomValidate event to validate the field if it is not hidden by .hide().

3

Hi,
After several attempts, I still can’t find a solution to my problem. I’m using custom template to manage my form, which contains several pages, and my HTML code looks like this (just the second page):


{{{page_2}}}
        <div class="row p-2 mb-2">
            <div class="origine_connsce_etab">
                <div>{{{caption origine_connsce_etab}}}</div>
                    {{{value origine_connsce_etab}}}
            </div>
        </div>
        <div class="row p-2">
            <div class="col-md-4 origine_personnel_id">
                <div>{{{caption origine_personnel_id}}}</div>
                    {{{value origine_personnel_id}}}
            </div>
            <div class="col-md-4 origine_prof_id">
                <div>{{{caption origine_prof_id}}}</div>
                    {{{value origine_prof_id}}}
            </div>
            <div class="col-md-4 origine_autre">
                <div>{{{caption origine_autre}}}</div>
                    {{{value origine_autre}}}
            </div>
        </div>
        <div class="row p-2">
            <div class="col-md-6 apporteur_affaire_id">
                <div>{{{caption apporteur_affaire_id}}}</div>
                    {{{value apporteur_affaire_id}}}
            </div>
        </div>
        {{{/page_2}}}

I then use this function in add page startup script to make my fields required or not, depending on the value selected.

function mask_origine(){         
        canal = $("#x_origine_connsce_etab").val();
        console.log(canal);
        if(canal == 'recommandation'){        
            $('.apporteur_affaire_id').show();
            $("#x_apporteur_affaire_id").show();
            $("#x_origine_personnel_id").hide();
            $("#x_origine_prof_id").hide();
            $("#x_origine_autre").hide();
            $(".origine_personnel_id").hide();
            $(".origine_prof_id").hide();
            $(".origine_autre").hide();
        }else if(canal == 'personnel'){
            $(".origine_personnel_id").show();
            $("#x_origine_personnel_id").show()
            $("#x_apporteur_affaire_id").hide();
            $("#x_origine_prof_id").hide();
            $("#x_origine_autre").hide();
            $(".apporteur_affaire_id").hide();
            $(".origine_prof_id").hide();
            $(".origine_autre").hide();
        }else if(canal == 'enseignant'){
            $(".origine_prof_id").show();
            $("#x_origine_prof_id").show();
            $("#x_apporteur_affaire_id").hide();
            $("#x_origine_personnel_id").hide();
            $("#x_origine_autre").hide();
            $(".apporteur_affaire_id").hide();
            $(".origine_personnel_id").hide();        
            $(".origine_autre").hide();
        }else if(canal == 'autre'){
            $(".origine_autre").show(); 
            $("#x_origine_autre").show();  
            $("#x_apporteur_affaire_id").hide();      
            $("#x_origine_personnel_id").hide();
            $("#x_origine_prof_id").hide();        
            $(".apporteur_affaire_id").hide();
            $(".origine_personnel_id").hide();
            $(".origine_prof_id").hide();                  
        }else{
            $("#x_apporteur_affaire_id").hide();
            $("#x_origine_personnel_id").hide();
            $("#x_origine_prof_id").hide();        
            $("#x_origine_autre").hide();
            $(".apporteur_affaire_id").hide();
            $(".origine_personnel_id").hide();
            $(".origine_prof_id").hide();
            $(".origine_autre").hide();
        }
    };

$("#x_origine_connsce_etab").change(function(){
            mask_origine();
        });

I also use .hide() to hide fields conditionally. My fields are hidden, but are still required, so the form can’t be posted.
My four fields
x_apporteur_affaire_id
x_origine_personnel_id
x_origine_prof_id
x_origine_autre
are all set to required in “Edit tag->validation” (required checked) and I hope them to be not required when hidden by .hide();What’s wrong with my code ?I’ve tried using client side Form_CustomValidate event but I don’t really want to validate my fields, but rather make them required or not depending on the value of canal = $(“#x_origine_connsce_etab”).val();

4

If you are using Custom Template for Multi-Page, then make sure you have already included all the Tabs/Pages into your Custom Template. It won’t work if you only include a few of them.

5

hi,
Yes, all pages are included and the form is displayed correctly with all fields.
I’ve just posted the html and script for page_2 so as not to make my post too long.

6

Hi,
After a few simple tests on a small single-page form, I noticed that the “required” is not handled by phpmaker in custom templates when fields are hidden by .hide().
I therefore opted for custom management in Form_CustomValidate event.
Thanks !