How to validate the form field using input append

Question

I have created the form with multiple form field using html and jquery. Form fields have Firstname,Email, Mobile No,No Of Refer.No of Refer was selection option. I need put validation firstname and mobile,City. How can I do this. code is

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

Updated Code

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

As I understand your problem, you need to validate the format of the input. For that you can use the attribute 'pattern' in your input. It is using regex.

You may have a look to the W3C exemple here

Answer 2

Could be help- change your $(document).ready() code like:

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

});
}); 

and submit button should <input type="submit" value="Join!" id="mySubmit" /> <input type="submit" value="Join!" id="mySubmit" />

I think this is not proper answer but it will help you to solve this.

Answer 3

If you are using html5 then you can use the attributes.

FirstName : You can use pattern and max attribute for this.

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

mobile :

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