If any form field in the group is filled, prompt user to fill in the other fields within the same group
Question
I have a page which allows people to refer their family or friends. This page allows up to 5 referrals, only the details of the person making the referral and the first referral are compulsory.
The form fields for the referral are Salutation, Name, Contact number, Email and Best time to call. When any one of the form field is filled, eg Referral_2_Name, I want to prompt the user to fill in the remaining form fields within the same group (Referral_2_Salutation, Referral_2_Contact_Number, Referral_2_Email and 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>
1 answers
solution1
0 2016-05-23 01:52:08
Since you are using Bootstrap, you can add .has-error , .has-success , or .has-warning to the parent element of the form element you want as a requirement. The form element must have .control-label , .form-control , or .help-block as well. Refer here and here for details.
Example
<div class="col-md-5 .has-error">
<input type="text" class="form-control" name="Referral_3_Email" value="" maxlength="50">
</div>
OR
You can add the attribute required=true to each form element.
Example
<input type="text" class="form-control" name="Referral_3_Email" value="" maxlength="50" required=true>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jQuery require_from_group if a form field is filled/selected
allow hide/show on div to only work within its radio group and not affect the other radio groups in the same form
Copying one input field to a group of other input fields in jQuery
reset group of form fields - jquery
jQuery Validate - require at least one field in a group to be filled
when one field is filled other fields must be required
jQuery; Submit Form if Required Fields Filled in and Other Combinations Are True
Use the values of the input fields in a group as the value of the last input field in the group
How to autofill the other form field as per the value user entered in another field of the same form in PHP?
How can I add group of fields to my form every time user hits a button?
Related Tags