该表单具有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>
如果能找到可以向我展示可以将所需的字段属性附加到字段列表的人，我将不胜感激
答案 0 :(得分：0)
您需要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/
当然，您可以创建占位符和类似的东西来增强设计。
答案 1 :(得分：0)
我将"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>