Sakthi S Sakthi S - 6 months ago 34
jQuery Question

How to validate the form field using input append

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="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>');
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Toggle fields based on form values</h1>
<p>Change the age field and see what happens</p>
<div id="form1">
<form id="form_submit" action="#" method="post">
<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:
<select id="select_btn" name="refer" value="0">
<option value="0">select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<div id="input">

</div>
<p align="center">
<input type="submit" value="Join!" />
</p>
</form>
</div>




Answer

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="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('p input[name="city"]').val() == '') {
            alert('city should not be null');
            return false;
        }
    }

});

}); `

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

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

Comments