Require fields based on Dropdown selection

Require fields based on Dropdown selection using jQuery

Table of Contents

In this tutorial we will create Require fields based on Dropdown selection using jQuery and HTML with a live example.

While designing any registration or application form, sometimes we require some mandatory fields based on dropdown selection.

Here in this example, We will create a simple HTML form with one dropdown list and four textbox field and using jQuery on change () function to add and remove required attribute from textbox field.

Require fields based on Dropdown selection

Adding the CSS and JavaScript

Before creating the HTML form, we need to add some CSS and Javascript library files. The CSS and Javascript library below.

<link href="<a aria-label="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700 (opens in a new tab)" class="rank-math-link" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" target="_blank" rel="noreferrer noopener">https://fonts.googleapis.com/css?family=Roboto:300,400,500,700</a>" rel="stylesheet">
<link rel="stylesheet" href="<a aria-label="https://use.fontawesome.com/releases/v5.4.1/css/all.css (opens in a new tab)" class="rank-math-link" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" target="_blank" rel="noreferrer noopener">https://use.fontawesome.com/releases/v5.4.1/css/all.css</a>"  crossorigin="anonymous">

<script src="<a aria-label="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js (opens in a new tab)" class="rank-math-link" href="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" target="_blank" rel="noreferrer noopener">https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js</a>"></script><gwmw style="display:none;"><gwmw style="display:none;"></gwmw><gwmw style="display:none;"></gwmw></gwmw>

Creating the HTML Form

The HTML code below.

<div class="main-block">
  <h1>On Dropdown Value Selection Text Fields is Mandatory</h1>
  <form action="#" method="post">
    <hr>
    <div class="account-type">
      <select id="identityProof" name="identityProof" class="identityProof dropdown">
		  <option value="" selected disabled>Identity Proof</option>
        <option value="Passport" >Passport</option>
        <option value="PAN">PAN Card</option>
        <option value="Aadhar">Aadhar Card</option>
      </select>
    </div>
    <hr>
    <div class="show" id="passport">
      <input type="text" name="passportNumber" id="passportNumber" placeholder="Passport Number"/>
      <input type="date" name="validityDate" id="validityDate"/>
    </div>
    <div class="hidden" id="panCR">
      <input type="text" name="panCard" id="panCard" placeholder="PAN Card Number"/>
    </div>
    <div class="hidden" id="aadhar">
      <input type="text" name="aadharNumber" id="aadharNumber" placeholder="Aadhar Number"/>
    </div>
    <hr>
    <div class="btn-block">
      <button type="submit" href="/">Submit</button>
    </div>
  </form>
</div>

<h1>On Dropdown Value Selection Text Fields is Mandatory</h1>

<hr>

<option value="" selected disabled>Identity Proof</option>

<option value="Passport" >Passport</option>

<option value="Aadhar">Aadhar Card</option>

</select>

</div>

<hr>

</div>

</div>

</div>

<hr>

<button type="submit" href="/">Submit</button>

</div>

</form>

</div>

Require fields based on Dropdown selection using jQuery

Adding Style CSS

html, body {
    display: flex;
    justify-content: center;
    height: 100%;
}
body, div, h1, form, input, p {
    padding: 0;
    margin: 0;
    outline: none;
    font-family: Roboto, Arial, sans-serif;
    font-size: 16px;
    color: #666;
}
h1 {
    padding: 10px 0;
    font-size: 32px;
    font-weight: 300;
    text-align: center;
}
p {
    font-size: 12px;
}
hr {
    color: #a9a9a9;
    opacity: 0.3;
}
.main-block {
    width: 400px;
    min-height: 460px;
    padding: 10px 0;
    margin: auto;
    border-radius: 5px;
    border: solid 1px #ccc;
    box-shadow: 1px 2px 5px rgba(0,0,0,.31);
    background: #ebebeb;
}
form {
    margin: 0 30px;
}
.account-type, .gender {
    margin: 15px 0;
    text-align: center;
}
input[type=text], input[type=date] {
    width: 97%;
    height: 36px;
    margin: 13px 0 0 -5px;
    padding-left: 10px;
    border-radius: 5px 5px 5px 5px;
    border: solid 1px #cbc9c9;
    box-shadow: 1px 2px 5px rgba(0,0,0,.09);
    background: #fff;
}
.dropdown {
    width: 100%;
    height: 36px;
    margin: 13px 0 0 -5px;
    padding-left: 10px;
    border-radius: 5px 5px 5px 5px;
    border: solid 1px #cbc9c9;
    box-shadow: 1px 2px 5px rgba(0,0,0,.09);
    background: #fff;
    font-size: 14px;
    color: #666;
}
.btn-block {
    margin-top: 10px;
    text-align: center;
}
button {
    width: 100%;
    padding: 10px 0;
    margin: 10px auto;
    border-radius: 5px;
    border: none;
    background: #1c87c9;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
button:hover {
    background: #26a9e0;
}
	.show{
		display: block;
	}
	.hidden{
		display: none;
	}
</style>

html, body {

display: flex;

justify-content: center;

height: 100%;

}

body, div, h1, form, input, p {

padding: 0;

margin: 0;

outline: none;

font-family: Roboto, Arial, sans-serif;

font-size: 16px;

color: #666;

}

h1 {

padding: 10px 0;

font-size: 32px;

font-weight: 300;

text-align: center;

}

p {

font-size: 12px;

}

hr {

color: #a9a9a9;

opacity: 0.3;

}

.main-block {

width: 400px;

min-height: 460px;

padding: 10px 0;

margin: auto;

border-radius: 5px;

border: solid 1px #ccc;

box-shadow: 1px 2px 5px rgba(0,0,0,.31);

background: #ebebeb;

}

form {

margin: 0 30px;

}

.account-type, .gender {

margin: 15px 0;

text-align: center;

}

input[type=text], input[type=date] {

width: 97%;

height: 36px;

margin: 13px 0 0 -5px;

padding-left: 10px;

border-radius: 5px 5px 5px 5px;

border: solid 1px #cbc9c9;

box-shadow: 1px 2px 5px rgba(0,0,0,.09);

background: #fff;

}

.dropdown {

width: 100%;

height: 36px;

margin: 13px 0 0 -5px;

padding-left: 10px;

border-radius: 5px 5px 5px 5px;

border: solid 1px #cbc9c9;

box-shadow: 1px 2px 5px rgba(0,0,0,.09);

background: #fff;

font-size: 14px;

color: #666;

}

.btn-block {

margin-top: 10px;

text-align: center;

}

button {

width: 100%;

padding: 10px 0;

margin: 10px auto;

border-radius: 5px;

border: none;

background: #1c87c9;

font-size: 14px;

font-weight: 600;

color: #fff;

}

button:hover {

background: #26a9e0;

}

.show{

display: block;

}

.hidden{

display: none;

}

</style>

Adding the jQuery code

We will use the .prop() method, so for each of dropdown values. change we will have something like.

<script type="text/javascript">
	$('.identityProof').change(function() {
		var identityProof = $(this).val();
		if(identityProof =="Passport"){
		$('#passport').removeClass("hidden");
		$('#passport').addClass("show");
		$('#panCR').addClass("hidden");
		$('#panCR').removeClass("show");
		$('#aadhar').removeClass("show");
		$('#aadhar').addClass("hidden");
		$("#passportNumber").prop('required',true);
		$("#validityDate").prop('required',true);
		$("#panCard").prop('required',false);
		$("#aadharNumber").prop('required',false);
		}
		else if(identityProof =="PAN") {	
		$('#passport').removeClass("show");
		$('#passport').addClass("hidden");
		$('#panCR').removeClass("hidden");
		$('#panCR').addClass("show");
		$('#aadhar').removeClass("show");
		$('#aadhar').addClass("hidden");
		$("#panCard").prop('required',true);
		$("#passportNumber").prop('required',false);
		$("#validityDate").prop('required',false);
		$("#aadharNumber").prop('required',false);
		}
		else if(identityProof =="Aadhar") {	
		$('#aadhar').removeClass("hidden");
		$('#aadhar').addClass("show");
		$('#panCR').removeClass("show");
		$('#panCR').addClass("hidden");
		$('#passport').removeClass("show");
		$('#passport').addClass("hidden");
		$("#aadharNumber").prop('required',true);
		$("#passportNumber").prop('required',false);
		$("#validityDate").prop('required',false);
		$("#panCard").prop('required',false);
		} else {
		$("#aadharNumber").prop('required',false);
		$("#passportNumber").prop('required',false);
		$("#validityDate").prop('required',false);
		$("#panCard").prop('required',false);	
		}
		//console.log(identityProof);	
	});
	</script>

$('.identityProof').change(function() {

var identityProof = $(this).val();

if(identityProof =="Passport"){

$('#passport').removeClass("hidden");

$('#passport').addClass("show");

$('#panCR').addClass("hidden");

$('#panCR').removeClass("show");

$('#aadhar').removeClass("show");

$('#aadhar').addClass("hidden");

$("#passportNumber").prop('required',true);

$("#validityDate").prop('required',true);

$("#panCard").prop('required',false);

$("#aadharNumber").prop('required',false);

}

else if(identityProof =="PAN") {

$('#passport').removeClass("show");

$('#passport').addClass("hidden");

$('#panCR').removeClass("hidden");

$('#panCR').addClass("show");

$('#aadhar').removeClass("show");

$('#aadhar').addClass("hidden");

$("#panCard").prop('required',true);

$("#passportNumber").prop('required',false);

$("#validityDate").prop('required',false);

$("#aadharNumber").prop('required',false);

}

else if(identityProof =="Aadhar") {

$('#aadhar').removeClass("hidden");

$('#aadhar').addClass("show");

$('#panCR').removeClass("show");

$('#panCR').addClass("hidden");

$('#passport').removeClass("show");

$('#passport').addClass("hidden");

$("#aadharNumber").prop('required',true);

$("#passportNumber").prop('required',false);

$("#validityDate").prop('required',false);

$("#panCard").prop('required',false);

} else {

$("#aadharNumber").prop('required',false);

$("#passportNumber").prop('required',false);

$("#validityDate").prop('required',false);

$("#panCard").prop('required',false);

}

//console.log(identityProof);

});

</script>

Conclusion

We explained How to Require fields based on Dropdown selection using jQuery and HTML. Hope you like it so please like and share.

The Source Code and Demo Link below

Live Demo

Download

December 13, 2022

HTMLCSS

Owl Carousel Product Slider in HTML5

Know Details

jQuery Carousel Slider With Accordion Style Transitions

June 6, 2022

HTMLCSS

jQuery Carousel Slider With Accordion Style Transitions

Know Details

Testimonials HTML Template Free Download

January 15, 2022

HTMLCSS

Testimonials HTML Template Free Download

Know Details

Bootstrap Table with Pagination and Search

January 9, 2022

HTMLCSS

Bootstrap Table with Pagination and Search

Know Details

Attractive Responsive Testimonials Carousel

December 8, 2021

HTMLCSS

Attractive Responsive Testimonials Carousel

Know Details

How To Make Responsive Testimonial Slider

December 7, 2021

HTMLCSS

How To Make Responsive Testimonial Slider

Know Details

Require fields based on Dropdown selection