Why isn't my regex email validation working?

Question

I'm trying to create a super simple email validator by using a regular expression. I've checked out similar questions here on SO as well as looking up other solutions elsewhere, like W3resource. I'm not sure if I'm overlooking something or if I have something typed wrong. The problem I'm having is that whether I enter either a correct or incorrect email, nothing happens. Neither of my alerts are working and the page remains blank.

Here is my Javascript code.

function checkmail(inputText)
{
    var emailregex = /^\w[-._\w]*\w@\w[._\w]*\w\.\w{2,8}$/;
    if(inputText.value.match(emailregex)) {
        alert("You have entered a valid email address!");
        return true;
    } else {
        alert("You have entered an invalid email address!");
        return false;
    }
}

Here is my relevant HTML code.

        <div class="mail">
            <center>
                <p>Please enter an email address.</p>
                <form id="inputemail">
                    <input type='text' name='input'/>
                    <input type="submit" name="submit" value="Verify" onclick="checkmail(inputText)"/>
                </form>
            </center>
        </div>
        <script src="regexobj.js"></script>
    </body>
</html>

One thing you aren't doing is preventing the form to submit if it doesn't validate. [Hint]: Need to do something with the return. Beyond that you haven't identified what your specific problem is as outlined in How to Ask — charlietfl
– charlietfl, Commented Feb 9, 2019 at 19:00
Possible duplicate of How to validate an email address in JavaScript? — A. Meshu
– A. Meshu, Commented Feb 9, 2019 at 19:02
Are there any errors in the console? I don't see where you're defining inputText — Robin Zigmond
– Robin Zigmond, Commented Feb 9, 2019 at 19:03
Is probably blank due to errors thrown which you can check in browser dev tools console and when you click the input it causes form submit to reload the page — charlietfl
– charlietfl, Commented Feb 9, 2019 at 19:05
I repeat - where do you define the inputText you are sending to the function on click? If it's not defined, the function will throw an error and therefore not work. — Robin Zigmond
– Robin Zigmond, Commented Feb 9, 2019 at 19:08

Dangelo · Accepted Answer · 2019-02-09 19:51:47Z

You need to specify where to get the data from. In your code you have a function that defines a variable "inputText". In your code there is no data being sent to the function and the function fails to get the data and returns an error.

To fix this you need to specify the data that you want to get, for example:

function checkmail(){
var input = document.querySelector("input[name='input']");
var emailregex = /^\w[-._\w]*\w@\w[._\w]*\w\.\w{2,8}$/;
  if(input.value.match(emailregex)) {
    alert("You have entered a valid email address!");
    return true;
  } else {
    alert("You have entered an invalid email address!");
    return false;
  }
}

In this example the function will search for an input field with the name of input. input.value will contain the data from the input field.

In your HTML file you need to change the button submit to

<input type="submit" name="submit" value="Verify" onclick="checkmail()"/>

I have tested the above code and it should work accordingly. I hope to have helped with your problem.

Edit: When submitting the form the page will automatically reload, if you want to stay on the same page and just give an alert you could do the following changes in your HTML file:

Remove the onsubmit property on the Submit button

<input type="submit" name="submit" value="Verify"/>

Add the following onsubmit function to your form

onsubmit="event.preventDefault(); checkmail();"

When you submit the form, the form will first prevent the page from reloading and will then execute your function. When you click on the alert, the page will not reload and remove the values inserted in the form.

Collectives™ on Stack Overflow

Why isn't my regex email validation working?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related