Question

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

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

当我选择Refer为1时，它会显示以下表格字段

名称
移动
电子邮件
市
场

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

Answer 1

问题可能在你的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"
      }
    }
  })
})

调用jQuery.validator.addMethod()是必要的，因为验证器默认没有电话号码验证器。（见answer）

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

尝试

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

而不是

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

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

$('#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 个答案: