如何使用單一的形式

$(document).ready(function(){ 
 

 
\t $('select#select_btn').change(function(){ 
 
\t 
 
    var sel_value = $('option:selected').val(); 
 
\t if(sel_value==0) 
 
\t { 
 
\t \t //Resetting Form 
 
\t \t $("#form_submit").empty(); 
 
\t \t $("#form1").css({'display':'none'}); 
 
\t } 
 
\t else{ 
 
\t \t //Resetting Form 
 
\t \t $("#form_submit").empty(); 
 
\t \t 
 
\t \t //Below Function Creates Input Fields Dynamically 
 
\t  create(sel_value); 
 
\t \t 
 
\t \t //appending submit button to form 
 
\t \t $("#form_submit").append(
 
\t \t $("<input/>",{type:'submit', value:'Register'}) 
 
\t \t) 
 
\t \t } \t 
 
\t }); \t 
 
\t 
 
function create(sel_value){ 
 
    for(var i=1;i<=sel_value;i++) 
 
\t { 
 
\t $("div#form1").slideDown('slow'); 
 
\t  
 
\t  $("div#form1").append(
 
\t \t $("#form_submit").append(
 
\t \t $("<div/>",{id:'head'}).append(
 
\t \t $("<h3/>").text("Registration Form"+i)), 
 
\t \t $("<input/>", {type:'text', placeholder:'Name', name:'name_'+i}), 
 
\t \t $("<br/>"), 
 
\t \t $("<input/>", {type:'text', placeholder:'Mobile', name:'mobile'+i}), 
 
\t \t $("<br/>"), 
 
\t \t $("<input/>", {type:'text', placeholder:'Email'+i, name:'email_'+i}), 
 
\t \t $("<br/>"), 
 
\t \t //$('select').append($('<option>', {value:1, text:'One',name:'city',placeholder:'City'+i})), 
 
\t \t $("<hr/>"), 
 
\t \t $("<br/>") 
 
\t     )) 
 
\t  } 
 
\t 
 
\t } 
 
\t 
 
\t 
 
});

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

 
\t <div id="form1"> \t 
 
\t \t <form id="form_submit" action="#" method="post"> 
 
\t \t <!-- dynamic Registration Form Fields Creates here--> 
 
\t \t </form> 
 
\t </div> 
 
<!------ right side advertisement div -----------------> 
 

 
\t 
 
</div> 
 
</body>

我創建多個表單域的表單以及我需要驗證所有的表單字段創建具有相同名稱的多個表單域。我把驗證，但它不正常工作。它驗證第一個數據並停止驗證。

當我選擇Refer爲1則顯示以下表單域

名稱
移動
電子郵件
市
場

如果我選擇2種手段它應該顯示錶單域兩次，並且有效通貨膨脹。

來源

2016-05-30 user2454624

這個問題可能在你的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驗證插件依賴於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(); 
    });

來源

2016-05-30 12:12:59 x23

感謝您的回覆。但我需要顯示錶單字段時，我選擇參考？我該如何做到這一點 – user2454624

@ user2454624你想顯示所選擇的附加輸入嗎？ – x23

是的。我還需要驗證 – user2454624

如何使用單一的形式

回答

相關問題