validate a form using parsley.js submit outside form tag

Question

I have this scenario which I want to validate this code with parsley.js. Now I want to create a dynamic form inside a modal which is a reusable modal with button/submit outside the form tag. How can I validate this scenario using parsley.js?

Here is what I meant, I have a scenario of like this which is this is separated file with my button:

    <form action="" method="POST" class="add_edit_job" id="<?php if($edit == 'yes'){?>edit_jobs<?php }else{?>post_jobs<?php }?>" data-parsley-validate="true">

    <input type="text" class="form-control" name="position" value="<?php echo $position?>" 
                 data-parsley-required/>
    <input type="text" class="form-control" name="location" value="<?php echo $location?>" 
                 data-parsley-required data-parsley-type="alphanum"/>
    <input type="text" class="form-control" name="number" value="<?php echo $number?>" 
                 data-parsley-required data-parsley-type="integer"/>
   </form>

then I have my button outside the form since my button is in the template with my modal something like this:

<input type="button" class="btn btn-sm btn-success save_data" value="Save">

I tried to do it in this way but I don't actually know about how can I submit this form and validate it using parsley.js. I want to fire the form submit but it only refreshes my page and do nothing.

$(document).ready(function() {
   $('.add_edit_job').parsley();
}); 

$('.save_data').click(function(e){  
    $('.add_edit_job').submit(); 
    console.log("clicked");
});

Answer 1

Something else is going on, since what you are doing works for a simple case

This is bogus code because StackOverflow is starting
to be kind of restrictive and wants that
"Links to codepen.io must be accompanied by code."