0

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>
Fukiyel
  • 1,166
  • 7
  • 19
codestudent
  • 73
  • 2
  • 8
  • 1
    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 [ask] – charlietfl Feb 09 '19 at 19:00
  • Possible duplicate of [How to validate an email address in JavaScript?](https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript) – A. Meshu Feb 09 '19 at 19:02
  • It isn't the answer, but consider [using `test` instead of `match`](https://stackoverflow.com/questions/10940137/regex-test-v-s-string-match-to-know-if-a-string-matches-a-regular-expression). – Tyler Roper Feb 09 '19 at 19:02
  • 1
    Are there any errors in the console? I don't see where you're defining `inputText` – Robin Zigmond Feb 09 '19 at 19:03
  • @charlietfl My bad, I edited it to include my issue. – codestudent Feb 09 '19 at 19:03
  • @RobinZigmond When I ran it in console, the only error that showed for me was a syntax error - an "unexpected token <" in the doctype code. – codestudent Feb 09 '19 at 19:05
  • 1
    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 Feb 09 '19 at 19:05
  • @A.Meshu I've read over the solutions in that question multiple times and haven't been able to successfully solve my problem. – codestudent Feb 09 '19 at 19:05
  • 1
    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 Feb 09 '19 at 19:08
  • @RobinZigmond I wasn't sure if I needed to define that. I was basing this off of a working example I found in which inputText was not defined. – codestudent Feb 09 '19 at 19:10
  • @RobinZigmond I'm working off of this example: https://www.w3resource.com/javascript/form/email-validation.php – codestudent Feb 09 '19 at 19:11
  • Your validator will mark many valid email addresses as invalid. `info.exa-mple.com`, `info+group@example.com`, `info@example.amsterdam`, ... are all valid email addressed that won't be accepted by your validator. – t.niese Feb 09 '19 at 20:14

1 Answers1

1

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.

Dangelo
  • 46
  • 5