I am create the form with multiple form field with same. I have the form field Name,Mobile,Email,Refer and then No of reference based on the selection i show the following field
- Name
- Mobile
- City
- Course
My Code is
$(document).ready(function() {
$('select#select_btn').change(function() {
var sel_value = $('option:selected').val();
if (sel_value == 0) {
//Resetting Form
$("#form_submit").empty();
$("#form1").css({
'display': 'none'
});
} else {
//Resetting Form
$("#form_submit").empty();
//Below Function Creates Input Fields Dynamically
create(sel_value);
//appending submit button to form
$("#form_submit").append(
$("<input/>", {
type: 'submit',
value: 'Sumbit'
})
)
}
});
function create(sel_value) {
for (var i = 1; i <= sel_value; i++) {
$("div#form1").slideDown('slow');
$("div#form1").append(
$("#form_submit").append(
$("<div/>", {
id: 'head'
}).append(
$("<h3/>").text("Refer Form" + i)),
$("<h7/>").text("Name: "),
$("<input/>", {
type: 'text',
placeholder: 'Name',
name: 'name_' + i
}),
$("<br/>"),
$("<br/>"),
$("<h7/>").text("Mobile No: "),
$("<input/>", {
type: 'text',
placeholder: 'Mobile',
name: 'mobile' + i
}),
$("<br/>"),
$("<br/>"),
$("<h7/>").text("Email: "),
$("<input/>", {
type: 'email',
placeholder: 'Email',
name: 'email_' + i
}),
$("<br/>"),
$("<br/>"),
$("<h7/>").text("City: "),
$("<select>").append('<option val="0">--Select--</option>', '<option val="1">One</option>', '<option val="2">Two</option>', '<option val="3">Three</option>', '<option val="4">Four</option>', '<option val="5">Five</option>'),
$("<br/>"),
$("<br/>"),
$("<h7/>").text("Course: "),
$("<select>").append('<option val="0">--Select--</option>', '<option val="1">One</option>', '<option val="2">Two</option>', '<option val="3">Three</option>', '<option val="4">Four</option>', '<option val="5">Five</option>'),
$("<hr/>"),
$("<br/>")
))
}
}
});
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<p>Name:
<input type="text" name="Name" />
</p>
<p>Email:
<input type="text" name="player_email" />
</p>
<p>Mobile:
<input type="text" name="mobile" />
</p>
<p>Refer:
<div id="selected_form_code">
<select id="select_btn">
<option value="0">--Select--</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</div>
<div id="form1">
<form id="form_submit" action="#" method="post">
<!-- dynamic Registration Form Fields Creates here-->
</form>
</div>
<!------ right side advertisement div ----------------->
</div>
I need the Name,Mobile and City is mandatory field after select Refer field..
And I need put the custom message for the field validation. For example user select refer is 2 and he is fill the city in 1st level he forget to select 2 of the form i need to put the error message like "Please Select the City". How to do this???