Freemember email validation for specific domain using jQuery

Question

I'm trying to verify a Freemember registration form email input using jQuery to check for a specific domain. Below is the jQuery I'm using, ultimately my goal is to prevent the form from being submitted unless they are an example.org email address.

      $(document).ready(function() { 
      $('form#example-register input#register').submit(function() {  

                $(".error").hide();
                var hasError = false;
                var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                var emailLegalReg =  /^([\w-\.]+@(?!example.org)([\w-]+\.)+[\w-]{2,4})?$/;

                var emailaddressVal = $("input#email").val();
                if(emailaddressVal == '') {
                    $("input#email").after('<span class="error">Please enter your email address.</span>');
                    hasError = true;
                } else if(!emailReg.test(emailaddressVal)) {    
                    $("input#email").after('<span class="error">Enter a valid email address.</span>');
                    hasError = true;
                } else if(emailLegalReg.test(emailaddressVal)) {    
                    $("input#email").after('<span class="error">No eamil other than example.org.</span>');
                    hasError = true;
                } 

                if(hasError == true) { return false; }
                else {
                    $("input#email").after('');
                    return false;
                }
    });    
});

Here is the template code for the Freemember registration form.

    {embed="included/html_head"}
    {embed="included/page_header"}
         <div id="content" class="register">
         {if logged_out}
            <h1>Registration</h1>
            <p>Fill out the form below to register, once submitted your account will have to be approved the Administrator.</p>
         {/if}
            <div id="login-form">

            {exp:freemember:register return="/example/" form_id="example-register" error_handling="inline" error_delimiters='<span class="error">|</span>'}

                    <label for="email">Email</label>
                    {field:email}
                    {error:email}<span class="error" style="display: none;">You must register using an example.org email address.</span>

                    <label for="password">Password</label>
                    {field:password}
                    {error:password}

                    <label for="password_confirm">Confirm Password</label>
                    {field:password_confirm}
                    {error:password_confirm}

                    <input type="submit" value="" class="register" />

            {/exp:freemember:register}
            </div>
         </div>
   {embed="included/page_footer"}
   {embed="included/html_footer"}

Answer 1

Your problem is your selector: $('form#example-register input#register'). The submit event is tied to the form, not the submit button. Try changing your selector to $('form#example-register'). Also adding a console.log('submit') into the function is good to even see if the event is getting called.

Also, while input[type="submit"] is accepted, IMO it's better to use a button, since it's a button. This really isn't an error, but I like to be able to call $('input') on any document and be able to omit the buttons.

Also, your last conditional seems a little off. Try breaking the return false; out of that conditional onto it's own. You are technically repeating yourself anyway. If you ever put the same code into an IF as you do the ELSE, it doesn't need to be in the conditional since it gets triggered either way. Be as DRY as possible to make debugging easier.