Добавить обязательный атрибут в форму после видимого скрытия / отображения в форме

Question

Форма имеет 3 группы полей, которые пользователи могут использовать для добавления своего образования. Fastdropdown js используется, чтобы добавить больше или показать скрытые поля, и я хотел бы сделать это обязательным, если он открыт / отображается на form

<legend>Education:</legend>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Year_of_Degree">Year Of Degree *:</label>
    <div class="col-sm-9">
                        <select name="Year_of_Degree" class="Year_of_Degree form-control fstdropdown-select" id="Year_of_Degree">
                        <option value="" <?php echo  set_select('Year_of_Degree', ''); ?> >-Select-</option>
                        <?php for($year = 2019; $year >=1970; $year--){ ?>
                        <option value="<?php echo $year?>" <?php echo set_select('Year_of_Degree', $year); ?>><?php echo $year?></option>
                        <?php }?>
                        </select>           
</div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Class_of_Degree">Class Of Degree *:</label>
    <div class="col-sm-9">
                        <select name="Class_of_Degree"class="Class_of_Degree form-control required" id="Class_of_Degree">
                        <option value="" <?php echo  set_select('Class_of_Degree', ''); ?> >-Select-</option>
                        <option value="First Class Honours" <?php echo  set_select('Class_of_Degree', 'First Class Honours'); ?> >First Class Honours</option>
                        <option value="Second Class Honours – Upper Division" <?php echo  set_select('Class_of_Degree', 'Second Class Honours – Upper Division'); ?> >Second Class Honours – Upper Division</option>
                        <option value="Second Class Honours – Lower Division" <?php echo  set_select('Class_of_Degree', 'Second Class Honours – Lower Division'); ?> >Second Class Honours – Lower Division</option>
                        <option value="Third Class Honours" <?php echo  set_select('Class_of_Degree', 'Third Class Honours'); ?> >Third Class Honours</option>
                       
                        <option value="Distinction" <?php echo  set_select('Class_of_Degree', 'Distinction'); ?> >Distinction</option>
                        <option value="Upper Credit" <?php echo  set_select('Class_of_Degree', 'Upper Credit'); ?> >Upper Credit</option>
                        <option value="Lower Credit" <?php echo  set_select('Class_of_Degree', 'Lower Credit'); ?> >Lower Credit</option>
                        <option value="Merit" <?php echo  set_select('Class_of_Degree', 'Merit'); ?> >Merit</option>
                        <option value="Pass" <?php echo  set_select('Class_of_Degree', 'Pass'); ?> >Pass</option>
                        <option value="Fail" <?php echo  set_select('Class_of_Degree', 'Fail'); ?> >Fail</option>
                       
                        </select>
                        </div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Institution">Institution *:</label>
    <div class="col-sm-9">
                        <select name="Institution" class="Institution form-control fstdropdown-select" id="Institution">
                        <option value="" <?php echo  set_select('Institution', ''); ?> >-Select-</option>
                        <?php if($institution_list){
                        foreach($institution_list as $institution){ ?>
                        <option value="<?php echo $institution->idinstitution?>" <?php echo set_select('Institution', $institution->idinstitution); ?>><?php echo $institution->institution?></option>
                        <?php }
                        }?>
                        </select>
                        </div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Degree_Type">Degree Type *:</label>
    <div class="col-sm-9">
                        <select name="Degree_Type"class="Degree_Type form-control required" id="Degree_Type">
                        <option value="" <?php echo  set_select('Degree_Type', ''); ?> >-Select-</option>
                        <option value="OND" <?php echo  set_select('Degree_Type', 'OND'); ?> >OND</option>
                        <option value="HND" <?php echo  set_select('Degree_Type', 'HND'); ?> >HND</option>
                        <option value="Associate’s Degree" <?php echo  set_select('Degree_Type', 'Associate’s Degree'); ?> >Associate’s Degree</option>
                        <option value="Bachelor’s Degree" <?php echo  set_select('Degree_Type', 'Bachelor’s Degree'); ?> >Bachelor’s Degree</option>
                        <option value="Master’s Degree" <?php echo  set_select('Degree_Type', 'Master’s Degree'); ?> >Master’s Degree</option>
                        <option value="Professional Degree" <?php echo  set_select('Degree_Type', 'Professional Degree'); ?> >Professional Degree</option>
                        <option value="Doctorate Degree" <?php echo  set_select('Degree_Type', 'Doctorate Degree'); ?> >Doctorate Degree</option>
                       
                       
                        </select>
                        </div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Course_of_Study">Course Of Study *:</label>
    <div class="col-sm-9">
                        <input type="text" name="Course_of_Study" placeholder="Course Of Study..." class="Course_of_Study form-control" id="Course_of_Study" value="<?php echo set_value('Course_of_Study', ''); ?>" >           
</div>
                        </div>
                        <div id="qualification2" class="row-fluid">
                        <hr style="border: 1px solid #ccc;" />                        
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Year_of_Degree1">Year Of Degree :</label>
    <div class="col-sm-9">
                        <select name="Year_of_Degree1" class="Year_of_Degree1 form-control fstdropdown-select" id="Year_of_Degree1">
                        <option value="" <?php echo  set_select('Year_of_Degree1', ''); ?> >-Select-</option>
                        <?php for($year = 2019; $year >=1970; $year--){ ?>
                        <option value="<?php echo $year?>" <?php echo set_select('Year_of_Degree1', $year); ?>><?php echo $year?></option>
                        <?php }?>
                        </select>         
</div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Class_of_Degree1">Class Of Degree:</label>
    <div class="col-sm-9">
                        <select name="Class_of_Degree1"class="Class_of_Degree1 form-control required" id="Class_of_Degree1">
                        <option value="" <?php echo  set_select('Class_of_Degree1', ''); ?> >-Select-</option>
                        <option value="First Class Honours" <?php echo  set_select('Class_of_Degree1', 'First Class Honours'); ?> >First Class Honours</option>
                        <option value="Second Class Honours – Upper Division" <?php echo  set_select('Class_of_Degree1', 'Second Class Honours – Upper Division'); ?> >Second Class Honours – Upper Division</option>
                        <option value="Second Class Honours – Lower Division" <?php echo  set_select('Class_of_Degree1', 'Second Class Honours – Lower Division'); ?> >Second Class Honours – Lower Division</option>
                        <option value="Third Class Honours" <?php echo  set_select('Class_of_Degree1', 'Third Class Honours'); ?> >Third Class Honours</option>
                       
                        <option value="Distinction" <?php echo  set_select('Class_of_Degree1', 'Distinction'); ?> >Distinction</option>
                        <option value="Upper Credit" <?php echo  set_select('Class_of_Degree1', 'Upper Credit'); ?> >Upper Credit</option>
                        <option value="Lower Credit" <?php echo  set_select('Class_of_Degree1', 'Lower Credit'); ?> >Lower Credit</option>
                        <option value="Merit" <?php echo  set_select('Class_of_Degree1', 'Merit'); ?> >Merit</option>
                        <option value="Pass" <?php echo  set_select('Class_of_Degree1', 'Pass'); ?> >Pass</option>
                        <option value="Fail" <?php echo  set_select('Class_of_Degree1', 'Fail'); ?> >Fail</option>
                       
                        </select>
                        </div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="institution1">Institution:</label>
    <div class="col-sm-9">
                        <select name="institution1" class="institution1 form-control fstdropdown-select" id="institution1">
                        <option value="" <?php echo  set_select('institution1', ''); ?> >-Select-</option>
                        <?php if($institution_list){
                        foreach($institution_list as $institution){ ?>
                        <option value="<?php echo $institution->idinstitution?>" <?php echo set_select('institution1', $institution->idinstitution); ?>><?php echo $institution->institution?></option>
                        <?php }
                        }?>
                        </select>
                        </div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Degree_Type1">Degree Type:</label>
    <div class="col-sm-9">
                        <select name="Degree_Type1"class="Degree_Type1 form-control required" id="Degree_Type1">
                        <option value="" <?php echo  set_select('Degree_Type1', ''); ?> >-Select-</option>
                        <option value="OND" <?php echo  set_select('Degree_Type1', 'OND'); ?> >OND</option>
                        <option value="HND" <?php echo  set_select('Degree_Type1', 'HND'); ?> >HND</option>
                        <option value="Associate’s Degree" <?php echo  set_select('Degree_Type1', 'Associate’s Degree'); ?> >Associate’s Degree</option>
                        <option value="Bachelor’s Degree" <?php echo  set_select('Degree_Type1', 'Bachelor’s Degree'); ?> >Bachelor’s Degree</option>
                        <option value="Master’s Degree" <?php echo  set_select('Degree_Type1', 'Master’s Degree'); ?> >Master’s Degree</option>
                        <option value="Professional Degree" <?php echo  set_select('Degree_Type1', 'Professional Degree'); ?> >Professional Degree</option>
                        <option value="Doctorate Degree" <?php echo  set_select('Degree_Type1', 'Doctorate Degree'); ?> >Doctorate Degree</option>
                       
                       
                        </select>
                        </div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Course_of_Study1">Course Of Study:</label>
    <div class="col-sm-9">
                        <input type="text" name="Course_of_Study1" placeholder="Course Of Study..." class="Course_of_Study1 form-control" id="Course_of_Study1" value="<?php echo set_value('Course_of_Study1', ''); ?>" >           
</div>
                        </div>
                        </div>
                        <div id="qualification3" class="row-fluid">
                        <hr style="border: 1px solid #ccc;" />                        
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Year_of_Degree2">Year Of Degree:</label>
    <div class="col-sm-9">
                        <select name="Year_of_Degree2" class="Year_of_Degree2 form-control fstdropdown-select" id="Year_of_Degree2">
                        <option value="" <?php echo  set_select('Year_of_Degree2', ''); ?> >-Select-</option>
                        <?php for($year = 2019; $year >=1970; $year--){ ?>
                        <option value="<?php echo $year?>" <?php echo set_select('Year_of_Degree2', $year); ?>><?php echo $year?></option>
                        <?php }?>
                        </select>         
</div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Class_of_Degree2">Class Of Degree:</label>
    <div class="col-sm-9">
                        <select name="Class_of_Degree2"class="Class_of_Degree2 form-control required" id="Class_of_Degree2">
                        <option value="" <?php echo  set_select('Class_of_Degree2', ''); ?> >-Select-</option>
                        <option value="First Class Honours" <?php echo  set_select('Class_of_Degree2', 'First Class Honours'); ?> >First Class Honours</option>
                        <option value="Second Class Honours – Upper Division" <?php echo  set_select('Class_of_Degree2', 'Second Class Honours – Upper Division'); ?> >Second Class Honours – Upper Division</option>
                        <option value="Second Class Honours – Lower Division" <?php echo  set_select('Class_of_Degree2', 'Second Class Honours – Lower Division'); ?> >Second Class Honours – Lower Division</option>
                        <option value="Third Class Honours" <?php echo  set_select('Class_of_Degree2', 'Third Class Honours'); ?> >Third Class Honours</option>
                       
                        <option value="Distinction" <?php echo  set_select('Class_of_Degree2', 'Distinction'); ?> >Distinction</option>
                        <option value="Upper Credit" <?php echo  set_select('Class_of_Degree2', 'Upper Credit'); ?> >Upper Credit</option>
                        <option value="Lower Credit" <?php echo  set_select('Class_of_Degree2', 'Lower Credit'); ?> >Lower Credit</option>
                        <option value="Merit" <?php echo  set_select('Class_of_Degree2', 'Merit'); ?> >Merit</option>
                        <option value="Pass" <?php echo  set_select('Class_of_Degree2', 'Pass'); ?> >Pass</option>
                        <option value="Fail" <?php echo  set_select('Class_of_Degree2', 'Fail'); ?> >Fail</option>
                       
                        </select>
                        </div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="institution2">Institution:</label>
    <div class="col-sm-9">
                        <select name="institution2" class="institution2 form-control fstdropdown-select" id="institution2">
                        <option value="" <?php echo  set_select('institution2', ''); ?> >-Select-</option>
                        <?php if($institution_list){
                        foreach($institution_list as $institution){ ?>
                        <option value="<?php echo $institution->idinstitution?>" <?php echo set_select('institution2', $institution->idinstitution); ?>><?php echo $institution->institution?></option>
                        <?php }
                        }?>
                        </select>
                        </div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Degree_Type2">Degree Type:</label>
    <div class="col-sm-9">
                        <select name="Degree_Type2"class="Degree_Type2 form-control required" id="Degree_Type2">
                        <option value="" <?php echo  set_select('Degree_Type2', ''); ?> >-Select-</option>
                        <option value="OND" <?php echo  set_select('Degree_Type2', 'OND'); ?> >OND</option>
                        <option value="HND" <?php echo  set_select('Degree_Type2', 'HND'); ?> >HND</option>
                        <option value="Associate’s Degree" <?php echo  set_select('Degree_Type2', 'Associate’s Degree'); ?> >Associate’s Degree</option>
                        <option value="Bachelor’s Degree" <?php echo  set_select('Degree_Type2', 'Bachelor’s Degree'); ?> >Bachelor’s Degree</option>
                        <option value="Master’s Degree" <?php echo  set_select('Degree_Type2', 'Master’s Degree'); ?> >Master’s Degree</option>
                        <option value="Professional Degree" <?php echo  set_select('Degree_Type2', 'Professional Degree'); ?> >Professional Degree</option>
                        <option value="Doctorate Degree" <?php echo  set_select('Degree_Type2', 'Doctorate Degree'); ?> >Doctorate Degree</option>
                       
                       
                        </select>
                        </div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Course_of_Study2">Course Of Study:</label>
    <div class="col-sm-9">
                        <input type="text" name="Course_of_Study2" placeholder="Course Of Study..." class="Course_of_Study2 form-control" id="Course_of_Study2" value="<?php echo set_value('Course_of_Study2', ''); ?>" >           
</div>
                        </div>
                        </div>
                        <div class="row-fluid text-right" id="degreeBtn1">
                        <input type="button" class="addDegree2" value="+ Add Degree" />
                        <hr style="border: 1px solid #ccc;" />
                        </div>
                        <div class="row-fluid text-right" id="degreeBtn2">
                        <input type="button" class="addDegree3" value="+ Add Degree" />
                        <input type="button" class="removeDegree2" value="- Remove Degree" />
                        <hr style="border: 1px solid #ccc;" />
                        </div>
                        <div class="row-fluid text-right" id="degreeBtn3">
                        <input type="button" class="removeDegree3" value="- Remove Degree" />
                        <hr style="border: 1px solid #ccc;" />
                        </div>

Буду признателен, если мне удастся найти кого-то, кто может показать мне, как я могу прикрепить обязательный атрибут поля к списку полей в тот момент, когда он отображается в форме

Answer 1

Я интерпретировал "how i can attach the required field attribute to the list of fields the moment it is visible on the form" как то, что элемент (вход) получает видимость на экране, а не просто добавляется или un-hidden, поэтому, возможно, следующее может быть неприменимо, я не знаю. По существу, ниже PHP отображает длинную форму, чтобы имитировать большую форму, которая у вас есть в вопросе, большая часть которой будет off-screen при загрузке страницы. Сначала DOM запрашивается для списка узлов входных элементов, которые не имеют атрибута required, и, если они видимы, устанавливает атрибут. Поскольку пользователь прокручивает событие window.scroll, запускается и проверяется новый список узлов без этого атрибута - опять же, если они имеют видимость, они помечаются как required. Использование setTimeout просто для того, чтобы дать время для фактического наблюдения за изменением от необязательного к требуемому (как обозначено цветами CSS)

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Force "Required" attribute on form elements that have visibility</title>
        <style>
            body{height:100vh}

            form{width:80%;float:none;margin:auto;height:100vh;}
            label{width:100%; display:block; padding:3rem auto;}

            input,
            textarea{ padding:2rem; width:80%; margin:1rem; background:rgba(0,255,0,0.05); box-shadow: 0 0 15px rgba(0, 255, 0, 0.25); border-radius:1rem; }

            input:required,
            textarea:required{ background:rgba(255,0,0,0.05); box-shadow: 0 0 15px rgba(255, 0, 0, 0.25); border-radius:1rem; }

            input:focus
            ,textarea:focus{outline:none}
        </style>
        <script>

            let d=document;
            let w=window;
            let i=250;

            d.addEventListener('DOMContentLoaded', ()=>{

                const isvisible=function( n ){
                    let r=n.getBoundingClientRect();
                    let h=Math.max( d.documentElement.clientHeight, w.innerHeight );
                    return !( r.bottom < 0 || r.top - h >= 0 );
                };

                const setrequired=function(n){
                    setTimeout( ()=>{
                        n.required=true;
                    }, i );
                };

                let col=Array.from( d.querySelectorAll('form input:not( [required] ), form textarea:not( [required] )') );

                col.forEach( n=>{ /* set initial state if element is visible on page load */
                    if( isvisible( n ) && !n.hasAttribute( 'required' ) ){
                        setrequired( n );
                    }
                });


                w.addEventListener( 'scroll', function(e){
                    Array.from( d.querySelectorAll('form input:not( [required] ), form textarea:not( [required] )') );
                    col.forEach( n=>{ /* check and set on page scroll */
                        if( isvisible( n ) && !n.hasAttribute( 'required' ) ){
                            setrequired( n );
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <form>
            <?php
                /* 
                    deliberately make  tall form that will have many items not initially 
                    visible but which become visible when the user scrolls the page up/down
                */
                for( $i=1; $i < 100; $i++ )printf('<label>Field %1$d<input type="text" name="field%1$d" value="%1$d" /></label>', $i );

            ?>
        </form>
    </body>
</html>

Answer 2

Вам необходим псевдокласс: required в CSS. Например:

/* style all input elements with a required attribute */
input:required {
  box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85);
}

/**
 * style input elements that have a required
 * attribute and a focus state
 */
input:required:focus {
  border: 1px solid red;
  outline: none;
}

/**
 * style input elements that have a required
 * attribute and a hover state
 */
input:required:hover {
  opacity: 1;
}

Взяты отсюда: https://css -tricks.com / almanac / selectors / r / required /

Конечно, вы можете создатьзаполнители и тому подобное для улучшения вашего дизайна.