如何使用单个表单创建具有相同名称的多个表单字段

$(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:'Register'})
		)
		}	
	});	
	
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("Registration Form"+i)),
		$("<input/>", {type:'text', placeholder:'Name', name:'name_'+i}),
		$("<br/>"),
		$("<input/>", {type:'text', placeholder:'Mobile', name:'mobile'+i}),
		$("<br/>"),
		$("<input/>", {type:'text', placeholder:'Email'+i, name:'email_'+i}),
		$("<br/>"),
		//$('select').append($('<option>', {value:1, text:'One',name:'city',placeholder:'City'+i})),
		$("<hr/>"),
		$("<br/>")
	                 ))
	    }
	
	}
	
	
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/multipleform.js"></script>
</head> 
<body> 
<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 No Of Form to Display for Registration--</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>
</body>

I am creating a Form with multiple form fields and i need to validate all the form fields. I put the validation but it is not working properly. It validates 1st data and stop the validation.

我正在创建一个包含多个表单域的表单,我需要验证所有表单域。我把验证但是它没有正常工作。它验证第一个数据并停止验证。

When i select Refer as 1 it shows the following Form field

当我选择参考为1时,它显示以下表格字段

Name
Mobile
Email
City
Course

If i select 2 means it should show the form field two times, with validation.

如果我选择2表示它应该显示表单字段两次,并进行验证。

1 个解决方案

#1

The problem is likely in your javascript. In order for validation to work you need some code similar to the following

问题可能出在你的javascript中。为了使验证工作,您需要一些类似于以下的代码

$(function() {
  jQuery.validator.addMethod('phoneUS', function(phone_number, element) {
    phone_number = phone_number.replace(/\s+/g, '');
    return this.optional(element) || phone_number.length > 9 &&
      phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
  }, 'Please enter a valid phone number.');

  $('#form_submit').validate({
    rules: {
      Name: "required",
      player_email: "required",
      mobile: {
        required: true,
        phoneUS: true
      }
    },
    messages: {
      Name: {
        required: "Please enter your name"
      },
      player_email: {
        required: "Please enter your email"
      },
      mobile: {
        required: "Please enter your phone number",
        phoneUS: "Please enter a valid US phone number"
      }
    }
  })
})

The call to jQuery.validator.addMethod() is necessary because the validator doesn't have a phone number validator by default. (See this answer)

调用jQuery.validator.addMethod()是必要的,因为验证器默认没有电话号码验证器。 (见这个答案)

You should also reverse your script tags because the jQuery Validation Plugin depends on jQuery.

您还应该反转脚本标记,因为jQuery Validation Plugin依赖于jQuery。

Try

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

instead of

<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>

EDIT

To make the dynamic fields work add the inputs to form:

要使动态字段工作,请添加以下形式的输入:

<div id="input">
  <input type='text' name='hide1'/>
  <br>
  <input type='text' name='hide2'/><br>
  <input type='text' name='hide3'/><br>
  <input type='text' name='hide4'/>
  <br>
  <input type='text' name='hide5'/>
</div>

Then you can hide them in jQuery with $('#input input').hide();. You can use jQuery to reveal the fields and add validation to them on the change event of the select element (See the plugin documentation). You could try

然后你可以用$('#input input')将它们隐藏在jQuery中.hide();.您可以使用jQuery显示字段并在select元素的change事件上添加验证(请参阅插件文档)。你可以试试

  $('#select_btn').change(function() {
    var val = $('#select_btn').val();

    if (val > 0) {
      $('input[name=hide1]').show().rules('add', {
        required: true
      });
    } else {
      $('input[name=hide1]').hide().rules('remove');
    }
    if (val > 1) {
      $('input[name=hide2]').show().rules('add', {
        required: true
      });
    } else {
      $('input[name=hide2]').hide().rules('remove');
    }
    if (val > 2) {
      $('input[name=hide3]').show().rules('add', {
        required: true
      });
    } else {
      $('input[name=hide3]').hide().rules('remove');
    }
    if (val > 3) {
      $('input[name=hide4]').show().rules('add', {
        required: true
      });
    } else {
      $('input[name=hide4]').hide().rules('remove');
    }
    if (val > 4) {
      $('input[name=hide5]').show().rules('add', {
        required: true
      });
    } else {
      $('input[name=hide5]').hide().rules('remove');
    }

    $('#input>input:hidden+label').hide();
  });

#1