-1

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: john@mail.com, thiffany@mail.com, scott@mail.com..."></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:john@mail.com, thiffany@mail.com, scott@mail.com...");
            $("#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.

bob
  • 4,282
  • 2
  • 22
  • 30
Ricardo Sanchez
  • 13
  • 3
  • 1
    You may want to try doing dynamic fields (like you click a `+` sign and it adds a new text input field) so the user would add one email per field. Might be easier to manage. You could use `append()`. – Rasclatt Dec 12 '15 at 07:40
  • I don't know why I got a negative point on my question. We come to this sites to learn and ask for help, I am not a professional programmer but it is my hobbie and I am trying to learn as much as I can. This type of actions make people not to ask again when they are not sure about something, thinking somebody might give you a negative point just because your code was broken. This is why people come to this site on the first place(because the code is broken and looking for help. For those who tried to show me the right path, Thank You it helped me a lot. – Ricardo Sanchez Dec 13 '15 at 06:06

5 Answers5

0

Your code might look correct, but you are using bad technique. My advice is to use jquery validation plugin that would handle textarea validation.for you. Also notice. There might be many solutions for this problem, but you should stick with simple one. And the first problem i see stright away is: button tag doesnt have type attribute. You are changing #error_message html, not text. Etc...

Medet Tleukabiluly
  • 11,662
  • 3
  • 34
  • 69
0

Few errors as I noted down:

  1. The code snippet posted here has missing braces }); at the end.
  2. Also, what is your_string variable in the function check_email.
  3. Also, error_message is assigned false always so the submit method will return true always.

Fixing this issues should help you.

hkasera
  • 2,118
  • 3
  • 23
  • 32
0
    var array = str.split(/,\s*/);
    array.every(function(){
    if(!validateEmail(curr)){
    // email is not valid!
return false;
    }
    })

// Code from the famous Email validation

function validateEmail(email) {
    var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}
Community
  • 1
  • 1
itamar
  • 3,837
  • 5
  • 35
  • 60
0

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>
Rasclatt
  • 12,498
  • 3
  • 25
  • 33
0

Hi please use below js code, 

  $('#emails').focusout(function(e) {
  var email_list = $('#emails').val();
  var email_list_array = new Array();
  email_list_array = email_list.split(",");
  var invalid_email_list=' ';
  $.each(email_list_array, function( index, value ) {

   if(!validEmail(value))
   {
     invalid_email_list=invalid_email_list+' '+value+',';
   }
  });
      console.log(invalid_email_list+' is not correct format.');
     alert(invalid_email_list+' is not correct format.');
 })

 function validEmail(v) {
var r = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?");
return (v.match(r) == null) ? false : true;
}

If you need to check more REGEX just do it validEmail() function. I hope this will help to sort out.

thank you

Desert_king
  • 96
  • 4