I'm doing a regex check valid email function and I get a vague error that it's not a function.

These are the answers I referenced:

A simple jQuery form validation script

Validate email with a regex in jQuery

JavaScript regexp match against variable email domain

The basic gist of the last two answers is to run a .test() running it against the email input. So from the third question I linked:

var userinput = '[email protected]';
var domain = 'somethingelse';

var pattern = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i
if(!pattern.test(userinput) || userinput.split('@')[1] != domain)
{
  alert('not a valid e-mailadres, or the wrong domain!');
}​

I took this seemingly basic premise and ran with it.

My code looks like this:

HTML:

<form action="/premium/sign-up/" method="POST" id="signupform">

    <div class="field">
        <input class="signup-form-input" type="text" name="name" id="signupform-name" >
        <label class="signup-form-input-label" for="name">Name</label>
    </div>
    <div class="field">
        <input class="signup-form-input" type="text" name="email" id="signupform-email" >
        <label class="signup-form-input-label" for="email">E-Mail</label>
    </div>
    <div class="field">
        <input class="signup-form-input" type="password" name="password" id="signupform-password" >
        <label class="signup-form-input-label" for="Password">Password</label>
    </div>
    <div class="field">
        <input type="hidden" name="_csrftoken" value="<%= token %>">
        <input type="submit" name="submit" value="Next" class="signup-form-input" id="signup-next">
    </div>
    <div class="field field--lower-content">
        <input type="checkbox" name="update-opt" id="update-opt-checkbox">
        <label class="update-opt-label" for="update-opt">
            Sign up for updates from SparkNotes
        </label>
        <p>By signing up, you agree to SparkNotes’s <a href="/legal/">Terms of Service</a>
            , and <a href="/legal/privacy/">Privacy Policy</a> </p>
        <p>Already have an account? <a href="/premium/login/">Log in</a> </p>
    </div>
</form>

JavaScript:

$(function() {
    $("#signupform").submit(function(e) {
        var nameField = $("#signupform-name").val();
        var emailField = $("#signupform-email").val();
        var emailCheck = "^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$";
        var passwordField = $("#signupform-pasword").val();

        if (nameField === "") {
            e.preventDefault();
            $("#signupform-name").addClass("form-error");
        }
        if (!emailCheck.test(emailField)) {
            e.preventDefault();
            $("#signupform-email").addClass("form-error");
        }
        if (passwordField === "") {
            e.preventDefault();
            $("#signupform-name").addClass("form-error");
        }
    });
});

When I submit the form I get this:

Uncaught TypeError: "^w+([-+.']w+)@w+([-.]w+).w+([-.]w+)*$".test is not a function
at HTMLFormElement. (scripts.min.js:1)
at HTMLFormElement.dispatch (jquery.min.js:2)
at HTMLFormElement.y.handle (jquery.min.js:2)

Why am I getting this? What am I doing wrong that the linked answers are doing right?

I'm doing a regex check valid email function and I get a vague error that it's not a function.

These are the answers I referenced:

A simple jQuery form validation script

Validate email with a regex in jQuery

JavaScript regexp match against variable email domain

The basic gist of the last two answers is to run a .test() running it against the email input. So from the third question I linked:

var userinput = '[email protected]';
var domain = 'somethingelse.';

var pattern = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i
if(!pattern.test(userinput) || userinput.split('@')[1] != domain)
{
  alert('not a valid e-mailadres, or the wrong domain!');
}​

I took this seemingly basic premise and ran with it.

My code looks like this:

HTML:

<form action="/premium/sign-up/" method="POST" id="signupform">

    <div class="field">
        <input class="signup-form-input" type="text" name="name" id="signupform-name" >
        <label class="signup-form-input-label" for="name">Name</label>
    </div>
    <div class="field">
        <input class="signup-form-input" type="text" name="email" id="signupform-email" >
        <label class="signup-form-input-label" for="email">E-Mail</label>
    </div>
    <div class="field">
        <input class="signup-form-input" type="password" name="password" id="signupform-password" >
        <label class="signup-form-input-label" for="Password">Password</label>
    </div>
    <div class="field">
        <input type="hidden" name="_csrftoken" value="<%= token %>">
        <input type="submit" name="submit" value="Next" class="signup-form-input" id="signup-next">
    </div>
    <div class="field field--lower-content">
        <input type="checkbox" name="update-opt" id="update-opt-checkbox">
        <label class="update-opt-label" for="update-opt">
            Sign up for updates from SparkNotes
        </label>
        <p>By signing up, you agree to SparkNotes’s <a href="/legal/">Terms of Service</a>
            , and <a href="/legal/privacy/">Privacy Policy</a> </p>
        <p>Already have an account? <a href="/premium/login/">Log in</a> </p>
    </div>
</form>

JavaScript:

$(function() {
    $("#signupform").submit(function(e) {
        var nameField = $("#signupform-name").val();
        var emailField = $("#signupform-email").val();
        var emailCheck = "^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$";
        var passwordField = $("#signupform-pasword").val();

        if (nameField === "") {
            e.preventDefault();
            $("#signupform-name").addClass("form-error");
        }
        if (!emailCheck.test(emailField)) {
            e.preventDefault();
            $("#signupform-email").addClass("form-error");
        }
        if (passwordField === "") {
            e.preventDefault();
            $("#signupform-name").addClass("form-error");
        }
    });
});

When I submit the form I get this:

Uncaught TypeError: "^w+([-+.']w+)@w+([-.]w+).w+([-.]w+)*$".test is not a function
at HTMLFormElement. (scripts.min.js:1)
at HTMLFormElement.dispatch (jquery.min.js:2)
at HTMLFormElement.y.handle (jquery.min.js:2)

Why am I getting this? What am I doing wrong that the linked answers are doing right?

• javascript
• jquery
• validation

• 6 emailCheck is a string, not a regular expression. – epascarello Commented Apr 24, 2019 at 15:36
• Then howe the error doesn't say that? JS is so annoying. It should've said that. – kawnah Commented Apr 24, 2019 at 16:58
• It says it.... :) How is it supposed to know that the string is a regular expression. It can not guess what you were trying to do. – epascarello Commented Apr 24, 2019 at 16:59

1 Answer 1

The regex has to be like /yourRegex/.test(value) (without the quotes).