验证表单的textarea - jQuery

Question

I am trying to develope a plugin for an application that let the users invite their friends to use the application by just sending an email. Juts like Dropbox does to let the users invite friends and receive extra space.

I am trying to validate the only field I have in the form (textarea) with JQuery (I am new to JQuery) before submiting it and be handled by php.

This textarea will contain email addresses, separated by commas if more than one. Not even sure if textarea is the best to use for what I am trying to accomplish. Anyway here is my form code:

<form id="colleagues" action="email-sent.php" method="POST">
    <input type="hidden" name="user" value="user" />
    <textarea id="emails" name="emails" value="emails" placeholder="Example: [e-mail], [e-mail], [e-mail]..."></textarea>
    </br><span class="error_message"></span>
    <!-- Submit Button -->
     <div id="collegues_submit">              
        <button type="submit">Submit</button>
     </div>
</form>

Here is what I tried in Jquery with no success:

//handle error 
    $(function() {
          $("#error_message").hide();
          var error_emails = false;

          $("#emails").focusout(function() {
            check_email();
          });

        function check_email() {
          if(your_string.indexOf('@') != -1) {
            $("#error_message").hide();
          } else {
            $("#error_message").html("Invalid email form.Example:[e-mail], [e-mail], [e-mail]...");
            $("#error_message").show();
            error_emails = true;
            }
          }
          
          $("#colleagues").submit(function() {
            error_message = false;
            
            check_email();
            
            if(error_message == false) {
              return true;
            } else {
              return false;
            }
    });

I hope the question was clear enough, if you need more info please let me know.

Many thanks in advance for all your help and advises.

</div>

Answer 1

I would use, as I commented above, append() or prepend() and just add fields. As mentioned in another post, client side use jQuery validation, but you should for sure validate server-side using a loop and filter_var($email, FILTER_VALIDATE_EMAIL). Here is a really basic example of the prepend():

<form id="colleagues" action="" method="POST">
    <input type="hidden" name="user" value="user" />
    <input name="emails[]" id="starter" placeholder="Email address" />
    <div id="addEmail">+</div>
    </br><span class="error_message"></span>
    <!-- Submit Button -->
     <div id="collegues_submit">                
        <button type="submit">Submit</button>
     </div>
</form>
<script>
$(document).ready(function() {
    $("#addEmail").click(function() {
        $("#colleagues").prepend('<input name="emails[]" placeholder="Email address" />');
    });
});
</script>