如何使用输入追加来验证表单字段

Question

我已经使用html和jquery创建了具有多个表单字段的表单。 表单字段具有“名字”，“电子邮件”，“手机号码”，“推荐人数”。“推荐人数”为选择选项。 我需要把验证名字和手机，城市。 我怎样才能做到这一点。 代码是

 /*$(document).ready(function(e) { $("#select_btn").val('0'); $('#select_btn').change(function(e) { var selno = $(this).val(); $('#input').empty(); for(i=0; i < selno; i++ ){ $('#input').append('<div class="input'+i+'"><h2>'+(i+1)+'</h2><p> Name: <input type="text" name="name" /> </p> <p> Mobile:<input type="text" name="mob" /></p><p>Email:<input type="text" name="email" /></p><p>City: <select id="city" name="City"><option value="Mumbai">Mumbai</option><option value="Chennai">Chennai</option><option value="Delhi">Delhi</option><option value="Jammu">Jammu</option><option value="Ooty">Ooty</option></select></p><p>Course: <select id="course" name="Course"><option value="B.com">B.com</option><option value="BA">BA</option><option value="MBA">MBA</option><option value="B.Sc">B.Sc</option><option value="BCA">BCA</option></select></p></div>'); } }); });*/ $(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="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> </body> 

更新的代码

 $(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/>") )) } } }); 

Answer 1

据我了解您的问题，您需要验证输入的格式。 为此，您可以在输入中使用属性“模式”。 它正在使用正则表达式。

您可以在这里查看W3C示例

Answer 2

可能有帮助-更改您的$(document).ready()代码，例如：

$(document).ready(function(e) {
    $("#select_btn").val('0');
    $('#select_btn').change(function(e) {
    var selno = $(this).val();
    $('#input').empty();
    for(i=0; i < selno; i++ ){

$('#input').append('<div class="input'+i+'"><h2>'+(i+1)+'</h2><p> Name: <input type="text" name="name" /> </p> <p> Mobile:<input type="text"   name="mob" /></p><p>Email:<input type="text" name="email" /></p><p>City:     <select id="city" name="City"><option value="0">--Select City--</option><option value="Mumbai">Mumbai</option><option value="Chennai">Chennai</option><option value="Delhi">Delhi</option><option value="Jammu">Jammu</option><option value="Ooty">Ooty</option></select></p><p>Course: <select id="course" name="Course"><option value="B.com">B.com</option><option value="B.A">B.A</option><option value="MBA">MBA</option><option value="B.Sc">B.Sc</option><option value="BCA">BCA</option></select></p></div>');
}
});

$('#mySubmit').click(function() {
var total = $('#select_btn').val();

for(var i=0;i<total;i++) {
    if($('.input'+i).find('p input[name="name"]').val() == '') {
        alert('name should not be null');
        return false;
    }
    if($('.input'+i).find('p input[name="mob"]').val() == '') {
        alert('mobile should not be null');
        return false;
    }

    if($('.input'+i).find('#city').val() == '0') {
        alert('city should not be null');
        return false;
    }
}

});
}); 

并提交按钮应该<input type="submit" value="Join!" id="mySubmit" /> <input type="submit" value="Join!" id="mySubmit" />

我认为这不是正确的答案，但是它将帮助您解决此问题。

Answer 3

如果您使用的是html5，则可以使用属性。

FirstName：您可以为此使用pattern和max属性。

<p>Name:
  <input type="text" name="Name" pattern="[A-Za-z]" maxlength = "50"/>
</p>

手机：

<p>Mobile:
  <input type="text" name="mobile" pattern="[0-9]{10}"/>
</p>