Can anyone help me. I am stuck on many days. I want to validate my html form. My html form have many fields there is one section of courses where user can add courses also .When user click on add courses. the new clone will be added. I want to validate all the clone where user have created. Here is my html code
// enter code here
<section class="prices-plan-course">
<div class="container">
<div class="row ">
<div class="main-heading-class">
<h2>Courses</h2>
</div>
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-lg-10 col-md-10 col-sm-10 col-xs-12 business-box">
<form id="CourseAdd" role="form" method="POST" action="{{ url('/courses' )}}">{{ csrf_field() }}
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="heading">
<h4>College/Institute Name</h4>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<input name="listing[business_name]" type="text" class="form-control txtfield m-tb-10" placeholder="Enter Business Name" value="<?php if(!empty($data['listing']['business_name'])){ echo $data['listing']['business_name'];}?>">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="heading">
<h4>Description About College</h4>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<textarea name="listing[about]" class="form-control txtfield m-tb-10 txtarea" rows="5" placeholder="Add Your Description"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 forms-container">
<div class="row single-form">
<div class="heading">
<h4>Courses Offred</h4>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Course Title</span>
<input type="text" name="course[]" class="form-control txtfield m-tb-10 course" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Fees</span>
<input type="text" name="fees[]"class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Web Link</span>
<input type="text" name="weblink[]"class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Course Detail</span>
<textarea name="details[]"class="form-control txtfield m-tb-10 txtarea" rows="5" placeholder="Add Your Course Detail"></textarea>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Course Type</span>
<input type="text" name="coursetype[]" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Course Duration</span>
<input type="text" name="duration[]" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Location</span>
<input type="text" name="location[]" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Entry Requirement</span>
<input type="text" name="requirement[]" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Certificates</span>
<textarea name="certificate[]" class="form-control txtfield m-tb-10 txtarea" rows="5" placeholder="Add Your Certificates"></textarea>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="add-more-class ">
<div class="btn-save">
<a class="btn btn-info add-more-course">Add More Course</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="heading">
<h4>Additional Information</h4>
<div class="col-md-12 col-sm-12 col-xs-12">
<textarea name="listing[information]" class="form-control txtfield m-tb-10 txtarea" rows="5" placeholder="Add Your Description"></textarea>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="heading">
<h4>Images</h4>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="model-btn btn-fitiness">
<button type="button" class="btn btn-default" data-toggle="modal" data-target=".bd-example-modal">Upload Your Images</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="heading">
<h4>Add Certifications</h4>
<div class="col-md-12 col-sm-12 col-xs-12">
<textarea name="listing[certifications]" class="form-control txtfield m-tb-10 txtarea" rows="5" placeholder="Add Your Certifications"></textarea>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="heading">
<h4>Socail Media</h4>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Instagram</span>
<input name="listing[instagram]" type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Facebook</span>
<input name="listing[facebook]" type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Pinterest</span>
<input name="listing[pinterest]" type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Twitter</span>
<input name="listing[twitter]" type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Youtube</span>
<input name="youtube" type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="additional">
<div class="btn-save">
<button type="submit" class="btn btn-info">Save And Coutinue </button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="modal fade bd-example-modal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title">Upload Your Images Here</h5>
</div>
<div class="modal-body">
<div class="dropzone-img">
<form id="my-awesome-dropzone" action="{{ url('/add-images')}}" class="fallback dropzone">
{{ csrf_field() }}
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Upload</button>
</div>
</div>
</div>
</div>
</div>
My js code for add courses:- Add courses works fine. I want only validation code. This script fine for me :-
// enter code here
var count = 0;
$('.add-more-course').click(function() {
/*if($(".course").val() == ""){
alert("This field is required"); return false;
}*/
if (count < 4) {
/* clone single .single-form container */
var $new_form = $(this).parents('.forms-container').find('.single-form').first().clone(true);
/* clear form data if any field is filled */
$new_form.find('input,textarea').val("");
/* remove heading text and enable close button */
$new_form
.find('.heading h4')
.text("")
.append('<a type="button" class="close">×</a>');
/* append it before add more course button */
$(this).parents('.forms-container').find('.single-form').last().after($new_form)
count++;
}
else{
alert("You cannot add more courses"); return false;
}
});
$('.forms-container').on('click', '.single-form .close', function() {
$(this).parents('.single-form').remove();
count--;
});
i want to validate all the fields on click on save and continue. Can anyone please help me. It means lot for me
