CODEWITHSUNDEEP
javascriptjquery
Sasi Rekha
Sasi Rekha

Reputation: 223

jQuery validations not working for dynamically appended form

I'm appending a form after successful AJAX call. When i'm trying to put validations by using id of that form its not working. Below is the example of my code.

HTML

<div id="dynamic_form"></div>

JavaScript

tab +=  '<form id="edu_edit_datails" method="post" action="" name="edu_edit_datails" enctype="multipart/form-data">';
tab +=  '<div class="form-group">';
tab +=  '<label for="course">Course:</label>';
tab +=  '<input type="text" class="form-control" id="course" value="" placeholder="Enter your Course" name="course">';
tab +=  '</div>';
tab +=  '<button type="button" class="btn btn-primary " id="submit_edit_edu_dtls">Submit</button>';
tab +=  '</form>';
$('#dynamic_form').html(tab);

Validation on click

$(document).on('click', '#submit_edit_edu_dtls' , function(e){
  if($("#edu_edit_datails").valid() == false) {
    alert("fail");
    return false;
  } else {
    alert(success);
    return true; 
  }
});
$("#edu_edit_datails").validate({
  rules: {
    course: "required"
  }
})

Any help is greatly appreciated! Thanks in advance.

Upvotes: 0

Views: 424

Answers (1)

Mayank Patel
Mayank Patel

Reputation: 1571

You just need to validate the form (.validate) before you use the .valid()

var tab="";
tab +=  '<form id="edu_edit_datails" method="post" action="" name="edu_edit_datails" enctype="multipart/form-data">';
tab +=  '<div class="form-group">';
tab +=  '<label for="course">Course:</label>';
tab +=  '<input type="text" class="form-control" id="course" value="" placeholder="Enter your Course" name="course">';
tab +=  '</div>';
tab +=  '<button type="button" class="btn btn-primary " id="submit_edit_edu_dtls">Submit</button>';
tab +=  '</form>';
$('#dynamic_form').html(tab);
$("#edu_edit_datails").validate({
    rules: {
        course: "required"
    }
})
$(document).on('click', '#submit_edit_edu_dtls' , function(e){
    if($("#edu_edit_datails").valid() == false){
         alert("fail");
         return false;
    }else{
        alert("success");
        return true; 
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<diV id="dynamic_form"></div>

Upvotes: 2

Related Questions