How to add required on different form when button onclick

You just had to put everything in the same form.

As you can see, now that i've commented the separator, it works ^^

$(function() {
  $('#button1').click(function() {
    $("#email").prop('required', true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="email" name="email" placeholder="Email*">
<!--</form>
<form>-->
  <button id="button1">Submit</button>
</form>

Working fiddle: https://jsfiddle.net/andreitodorut/xe3z0nas/

HTML:

<form id="form1">
  <input type="text" id="email_to" name="email_to" required="required" placeholder="Email*">
  <button class="hide submit-form">
  Submit
  </button>
</form>
<form data-submit="#form1">
  <button id="button1">Submit</button>
</form>

JS:

$(document).ready(function() {
    $('form[data-submit]').submit(function(e){
    e.preventDefault();

    var formToSubmit = $(this).attr('data-submit');

    if(formToSubmit){
        $(formToSubmit).find('.submit-form').trigger('click');
    }
  })
})

CSS:

.hide {
    display: none; 
}

UPDATE https://jsfiddle.net/9wbranL3/4/

You have to put the button inside the same form tag.

HTML:

<form>
  <input type="text" id="email" name="email" placeholder="Email*">

  <button id="button1">Submit</button>
</form>

And the add the require attribute to email field, code is below:

  <input type="text" id="email" name="email" placeholder="Email*" required="true">

When you will submit the form it will check the blank condition and will show the same message are showing in the image.