我有一个页面，允许人们推荐他们的家人或朋友。此页面最多允许5个推荐人，只有推荐人和第一次推荐人的详细信息是强制性的。
推荐的表单字段是致敬，姓名，联系电话，电子邮件和最佳通话时间。当填写任何一个表单字段时，例如Referral_2_Name，我想提示用户填写同一组中的剩余表单字段（Referral_2_Salutation，Referral_2_Contact_Number，Referral_2_Email和Referral_2_Best_Time_To_Call）。
<!DOCTYPE html>
<html class="no-js">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<title>Customer Referral Programme</title>
<meta name="title" content="Customer Referral Programme">
<meta name="heading" content="Customer Referral Programme">
<meta name="description" content="Customer Referral Programme">
<meta name="keywords" content="">
<meta name="category" content="others">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/assets-forms/css/base.css">
<link rel="stylesheet" type="text/css" href="/assets-forms/css/form.css">
<link rel="stylesheet" type="text/css" href="/assets-forms/css/vendor/jquery-ui.css">
<script type="text/javascript" src="/assets-forms/js/vendor/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/assets-forms/js/vendor/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="/assets-forms/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="page-form o-wrapper">
<div id="section_contact_form">
<div class="form-alert">
<p>All fields with (*) are mandatory.</p>
</div>
<form id="customer_referral" action="formprocessing.php" method="post" class="form contact-form">
<div class="form-group row">
<div class="control-label col-md-12" style="color: #6d0017;"><strong>My Particulars</strong></div>
</div>
<div class="form-group row">
<div class="control-label col-md-4 required">Salutation</div>
<div class="col-md-5">
<select type="text" class="form-control" name="Salutation" required>
<option value="" selected disabled>Please select</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Mdm">Mdm</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="control-label col-md-4 required">Full Name</div>
<div class="col-md-5">
<input type="text" class="form-control" name="Name" required maxlength="50">
</div>
</div>
<div class="form-group row">
<div class="control-label col-md-4 required">NRIC /Passport No. </div>
<div class="col-md-5">
<input type="text" class="form-control" name="Nric_or_Passport_No" required maxlength="9">
</div>
</div>
<div class="form-group row">
<div class="control-label col-md-4 required">Contact Number</div>
<div class="col-md-5">
<input type="text" class="form-control" name="Contact_Number" maxlength="20">
</div>
</div>
<div class="form-group row">
<div class="control-label col-md-4 required">Email Address</div>
<div class="col-md-5">
<input type="text" class="form-control" name="Email" required maxlength="50">
</div>
</div>
<div class="Referral1">
<div class="form-group row">
<div class="control-label col-md-12" style="color: #6d0017;"><strong>My Referral: </strong></div>
</div>
<div class="form-group row">
<div class="control-label col-md-4 required">Salutation</div>
<div class="col-md-5">
<select type="text" class="form-control" name="Referral_Salutation" required>
<option value="" selected disabled>Please select</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Mdm">Mdm</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="control-label col-md-4 required">Name</div>
<div class="col-md-5">
<input type="text" class="form-control" name="Referral_Name" required maxlength="50">
</div>
</div>
<div class="form-group row">
<div class="control-label col-md-4 required">Contact Number (HP/Home/Office)</div>
<div class="col-md-5">
<input type="text" class="form-control" name="Referral_Contact_Number" required maxlength="20">
</div>
</div>
<div class="form-group row">
<div class="control-label col-md-4 required">Email Address</div>
<div class="col-md-5">
<input type="text" class="form-control" name="Referral_Email" required maxlength="50">
</div>
</div>
<div class="form-group row">
<div class="control-label col-md-4 required">Best Time to Call
<span class="popovers" data-toggle="popover"><i class="fa fa-info-circle text-red"></i></span>
</div>
<div class="col-md-5">
<select type="text" class="form-control" name="Referral_Best_Time_To_Call" required>
<option value="" selected disabled>Please select</option>
<option value="9am_to_12pm">9am - 12 pm</option>
<option value="12pm_to_2pm">12pm - 2pm</option>
<option value="2pm_to_4pm">2pm - 4pm</option>
<option value="4pm_to_6pm">4pm - 6pm</option>
<option value="Anytime">Anytime</option>
</select>
</div>
</div>
</div>
<div id="Referral2">
<div class="form-group row">
<div class="control-label col-md-12" style="color: #6d0017;"><strong>My Referral #2: </strong></div>
</div>
<div class="form-group row">
<div class="control-label col-md-4">Salutation</div>
<div class="col-md-5">
<select type="text" class="form-control" name="Referral_2_Salutation">
<option value="" selected disabled>Please select</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Mdm">Mdm</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="control-label col-md-4">Name</div>
<div class="col-md-5">
<input type="text" class="form-control" name="Referral_2_Name" value="" maxlength="50">
</div>
</div>
<div class="form-group row">
<div class="control-label col-md-4">Contact Number (HP/Home/Office)</div>
<div class="col-md-5">
<input type="text" class="form-control" name="Referral_2_Contact_Number" value="" maxlength="20">
</div>
</div>
<div class="form-group row">
<div class="control-label col-md-4">Email Address</div>
<div class="col-md-5">
<input type="text" class="form-control" name="Referral_2_Email" value="" maxlength="50">
</div>
</div>
<div class="form-group row">
<div class="control-label col-md-4">Best Time to Call</div>
<div class="col-md-5">
<select type="text" class="form-control" name="Referral_2_Best_Time_To_Call">
<option value="" selected disabled>Please select</option>
<option value="9am_to_12pm">9am - 12 pm</option>
<option value="12pm_to_2pm">12pm - 2pm</option>
<option value="2pm_to_4pm">2pm - 4pm</option>
<option value="4pm_to_6pm">4pm - 6pm</option>
<option value="Anytime">Anytime</option>
</select>
</div>
</div>
</div>
<div id="Referral3">
//Referral 3 form field here. Not compulsory for users to fill in, only when they have filled in one of the form fields in this group, then prompt users to fill in the rest of the form fields within this group.
</div>
<div id="Referral4">
//Referral 4 form fields here. Not compulsory for users to fill in, only when they have filled in one of the form fields in this group, then prompt users to fill in the rest of the form fields within this group.
</div>
<div id="Referral5">
//Referral 5 form fields here. Not compulsory for users to fill in, only when they have filled in one of the form fields in this group, then prompt users to fill in the rest of the form fields within this group.
</div>
<div class="form-group row">
<div class="col-md-3"></div>
<div class="col-md-9"><button id="addButton" class="btn btn-submit-contact" type="button">Add More Referral</button>
<button id="removeButton" class="btn btn-submit-contact" type="button">Remove Referral</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-5 col-md-3">
<button id="btn_submit_callback_form" class="btn btn-submit-contact" type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
<!-- Main script files -->
<script type="text/javascript" src="/assets-forms/js/vendor/bootstrap.min.js"></script>
<script type="text/javascript" src="/assets-forms/js/vendor/jquery-ui.js"></script>
<script type="text/javascript" src="/assets-forms/js/vendor/jqueryvalidation/jquery.validate.min.js"></script>
<script type="text/javascript" src="/assets-forms/js/form.js"></script>
</body>
</html>
答案 0 :(得分：0)
由于您使用的是Bootstrap，因此可以将.has-error，.has-success或.has-warning添加到所需表单元素的父元素中。表单元素也必须包含.control-label，.form-control或.help-block。有关详细信息，请参阅here和here。
<div class="col-md-5 .has-error">
<input type="text" class="form-control" name="Referral_3_Email" value="" maxlength="50">
</div>
您可以将属性required=true添加到每个表单元素。
<input type="text" class="form-control" name="Referral_3_Email" value="" maxlength="50" required=true>