在表单上可见隐藏/显示后向表单添加必需的属性

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

您需要 CSS 中的 :required 伪类。例如：

/* 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/

当然，您可以创建占位符之类的东西来增强您的设计。

Answer 2

我将 "how i can attach the required field attribute to the list of fields the moment it is visible on the form" 解释为当元素 ( input ) 在屏幕上获得可见性而不是仅仅添加到或 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>