jQuery Wordpress Issue Form Validation

Question

I have been through a series of revisions on this website I'm working on, basically, I need to add validation to email input field that only allows .edu extension for an only student type registrations.

Currently, there is a dropdown by which someone can select either student or a business. So when someone selects a student I want that validation rule to apply that only .edu can only register.

After struggling through google and StackOverflow I coded two scripts in jQuery which does not seem to be working well.

A user fills all the form fields and when at the select student the email input field should be checked and should stop the user to create an account if it does have .edu extension.

Code 1:

jQuery( document ).ready(function(){
jQuery('#reg_email').on('input',function(e){
 var email = document.getElementById("reg_email");
 var counter = 0;
if(jQuery(".chosen-single span").text().search("Student") == 0){
if (email.value.indexOf("@") != -1) {
    if (!(/(.+)@(.+)\.(edu)$/.test(email.value))) {
   if(counter<=0){
        jQuery('#signup-dialog input[type="submit"]').prop('disabled', true);
    jQuery(".form-row.form-row-wide:eq(1)").append('<p id="alert" style="padding-top:5px;color:red;">You are not eligible for an account. Please enter a valid .edu email.</p>');
counter++;
}
    }else{
      jQuery(#alert).remove();
      jQuery('#signup-dialog input[type="submit"]').prop('disabled', false);
    }

}
}
});
});

This Code above repeatedly adds the p tag but i tried to bound it to only once.

Code 2:

jQuery( document ).ready(function(){
var email = document.getElementById("reg_email");
if(jQuery(".chosen-single span").text().search("Student") == 0){
jQuery("#reg_email").validate({
    rules: {
        email: {
            required: true,
            email: true,
            pattern: /(\.edu\.\w\w\w?)$/
        }
    }
});
}
});

This does not even work I have even included two scripts the validate.min.js and the additional-methods.min.js but still does not work.

It's like I'm starting to have a feeling that this is not even possible.

Please if someone can help it will be appreciated.

The website is website When you click signup you will see the sign-up modal box.

For now, I have removed all custom JS code. So you guys can check in the console.

PS EDIT

Code 3: I tried even this

 jQuery( document ).ready(function(){
 var email = document.getElementById("reg_email");
 var done = false;
jQuery(".chosen-single span").on('DOMSubtreeModified', function () {
if(jQuery(".chosen-single span").html() == 'Student') {
if (email.value.indexOf("@") != -1) {
    if (!(/(.+)@(.+)\.(edu)$/.test(email.value))) {
   if(!done) {
    jQuery('#signup-dialog input[type="submit"]').prop('disabled', true);
    jQuery(".form-row.form-row-wide:eq(1)").append('<p id="alert" style="padding-top:5px;color:red;">You are not eligible for an account. Please enter a valid .edu email.</p>');
done = true;
}
 else{
      jQuery("#alert").remove();
      jQuery('#signup-dialog input[type="submit"]').prop('disabled', false);
    }
}
}
});
});

But in this code, I only check domsubtreemodified and generate an alert box if the span value is 'Student' but the rest of the below code is not working.

This is the HTML FORM

<form method="post" class="register workscout_form">
    <p class="form-row form-row-wide">
                        <label for="reg_username">Username <span class="required">*</span>
                        <i class="ln ln-icon-Male"></i>
                        <input type="text" class="input-text" name="username" id="reg_username" value="">
                        </label>
                    </p>

                <p class="form-row form-row-wide">
                    <label for="reg_email">Email address <span class="required">*</span>
                    <i class="ln ln-icon-Mail"></i><input type="email" class="input-text" name="email" id="reg_email" value="">
                    </label>
                </p>


                    <p class="form-row form-row-wide">
                        <label for="reg_password">Password <span class="required">*</span>
                        <i class="ln ln-icon-Lock-2"></i><input type="password" class="input-text" name="password" id="reg_password">
                        </label>
                    </p>

                             <p class="form-row terms wc-terms-and-conditions">
            <label class="woocommerce-form__label woocommerce-form__label-for-checkbox checkbox">
                <input type="checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" name="terms" id="terms" autocomplete="off"> <span>I’ve read and accept the <a href="https://brainbaitinc.com/terms-of-service/" target="_blank" class="woocommerce-terms-and-conditions-link">terms &amp; conditions</a></span> <span class="required">*</span>
            </label>
            <input type="hidden" name="terms-field" value="1">
        </p>
                    <label for="user_email">I want to register as</label><select name="role" class="input chosen-select" style="display: none;"><option value="employer">Business</option><option value="candidate">Student</option></select><div class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 100%;" title=""><a class="chosen-single" tabindex="-1"><span>Business</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off" readonly=""></div><ul class="chosen-results"></ul></div></div>
                <p class="form-row">
                    <input type="hidden" id="_wpnonce" name="_wpnonce" value="cc26c06e5b"><input type="hidden" name="_wp_http_referer" value="/">                    <input type="submit" class="button" name="register" value="Register">
                </p>
            </form>

This is the last code 4 I'm using It kinda work nicely but just one thing is left is that when let suppose user corrects the email with a proper speciifed edu email the warning should go and the button should be enabled i can't get this to work in this way.

jQuery( document ).ready(function(){
 var email = document.getElementById("reg_email");
 var done = false;
 jQuery("select[name='role']").change(function() {
     if(jQuery("select[name='role']").children(':selected').html() == 'Student') {
if (email.value.indexOf("@") != -1) {
    if (!(/(.+)@(.+)\.(edu)$/.test(email.value))) {
    if(!done) {
    jQuery('#signup-dialog input[type="submit"]').prop('disabled', true);
    jQuery(".form-row.form-row-wide:eq(1)").append('<p id="alert" style="padding-top:5px;color:red;">You are not eligible for an account. Please enter a valid .edu email.</p>');
    done = true;
}
 else{
      jQuery("#alert").remove();
      jQuery('#signup-dialog input[type="submit"]').prop('disabled', false);
    }
}
}
}
});
});

Answer 1

This should work, note that this will update on change , not after submitting the form.

function emailValid(email) {
    var re = /(\.edu\.\w\w\w?)$/;
    return re.test(email);
}

$(document).ready(function() {

    $(document).on('change', '#reg_email', function() {
        if ($(".chosen-single span").html() == 'Student') {
            if (!emailValid($('#reg_email').val())) {
                // Alert user that the email is not valid
            }
            else {
                // Remove the alert
            }
        }
    });

});

Answer 2

Okay so here is the complete code which helped me accomplish this task.

jQuery( document ).ready(function(){
 var email = document.getElementById("reg_email");
 var done = false;
 jQuery("select[name='role']").change(function() {
     if(jQuery("select[name='role']").children(':selected').html() == 'Student') {
if (email.value.indexOf("@") != -1) {
    if (!(/(\.edu\.\w\w\w?)$/.test(email.value))) {
    if(!done) {
    jQuery('#signup-dialog input[type="submit"]').prop('disabled', true);
    jQuery(".form-row.form-row-wide:eq(1)").append('<p id="alert" style="padding-top:5px;color:red;">You are not eligible for an account. Please enter a valid .edu email.</p>');
    done = true;
}
 else{
      jQuery("#alert").remove();
      jQuery('#signup-dialog input[type="submit"]').prop('disabled', false);
    }
}
}
}if(jQuery("select[name='role']").children(':selected').html() == 'Business') {
      done = false;
      jQuery("#alert").remove();
      jQuery('#signup-dialog input[type="submit"]').prop('disabled', false);
}
});
jQuery("#reg_email").on("change keyup paste", function(){
 if(jQuery("select[name='role']").children(':selected').html() == 'Student') {
if (email.value.indexOf("@") != -1) {
    if (/(\.edu\.\w\w\w?)$/.test(email.value)) {
        jQuery("#alert").remove();
      jQuery('#signup-dialog input[type="submit"]').prop('disabled', false);
    }else{
if(jQuery("p#alert").length <= 1){
  jQuery("p#alert").remove();
 jQuery('#signup-dialog input[type="submit"]').prop('disabled', true);
    jQuery(".form-row.form-row-wide:eq(1)").append('<p id="alert" style="padding-top:5px;color:red;">You are not eligible for an account. Please enter a valid .edu email.</p>');
  done = true;
}
}
}
}
});
});

Everything is now working and it's awesome! It might help someone so though post this.