0

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

  1. Name
  2. Mobile
  3. Email
  4. City
  5. 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???

Rajesh
  • 24,354
  • 5
  • 48
  • 79
  • you can add attribute as 'required' at end of each input and select tag which you think is required field, please refer this http://www.w3schools.com/tags/att_input_required.asp –  Jun 02 '16 at 07:55
  • for JavaScript side http://stackoverflow.com/questions/13798313/set-custom-html5-required-field-validation-message –  Jun 02 '16 at 08:00
  • theinarasu, i need the validation based on selection (in a loop) – user2454624 Jun 02 '16 at 08:29

0 Answers0