asked on

Javascript Email syntax validation for multiple forms

Hello,

I need the Javascript (and HTML for submit) for a function that can take the name of a form and the name of the email text field and validate it.

Thus, the one function could work with multiple forms on a single page.

If the syntax is wrong, a pop-up alert is generated.

If the syntax is right, the form is automatically submitted.

Thanks in advance.

Steve

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Steve Bohler

ASKER

The HTML5 approach works well. But, I want to test the Jquery version too.

I inserted the code.

My HTML looks like:

<form method=post name=frmSF action = "/mailpass.asp" class="form-main" onSubmit="return checkEmail(this,this.UserEmail2);">
<div class="input-row">
<label class="label-block" for="email_address">
                                                Enter Your Email Address: </label>
<input type=text name="UserEmail2" class="input-text" style="width: 300px;">
       <p></p>
<INPUT class="button-blue-dark button-round button-shadow" type="submit" name="Action" value="Retrieve Your Username">
      </INPUT>
       </p>
       </div>
</form>

When I click the submit button, I get the pop-up telling me:

form [object HTMLFormElement] not found

Any suggestions?

leakim971

check this out :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var checkEmail = function(formName, fieldName) { // you should use ID attribute instead Name attribute
            var value = '';
            var form = document.getElementsByName(formName);
            if(form.length) {
                var field = form[0][fieldName];
                if(field) {
                    value = field.value;
                }
                else {
                    alert("field" + fieldName + " not found");
                    return false;
                }
            }
            else {
                alert("form " + formName + " not found");
                return false;
            }
            if(/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test( value )) {
                return true;
            }
            else {
                alert("email : " + fieldName + " not good");
                return false;
            }
        };

    </script>
</head>
<body>
<form method=post name=frmSF action = "/mailpass.asp" class="form-main" onSubmit="return checkEmail(this.name,this.UserEmail2.name);">
    <div class="input-row">
        <label class="label-block" for="email_address">
            Enter Your Email Address: </label>
        <input type=text name="UserEmail2" class="input-text" style="width: 300px;">
        <p></p>
        <INPUT class="button-blue-dark button-round button-shadow" type="submit" name="Action" placeholder="Retrieve Your Username" />

        </p>
    </div>
</form>
</body>
</html>

Open in new window

or :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var checkEmail = function(fieldID) { // you should use ID attribute instead Name attribute
            var value = document.getElementById(fieldID).value;
            if(/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test( value )) {
                return true;
            }
            else {
                alert("email not good");
                return false;
            }
        };

    </script>
</head>
<body>
<form method=post name=frmSF action = "/mailpass.asp" class="form-main" onSubmit="return checkEmail('UserEmail2');">
    <div class="input-row">
        <label class="label-block" for="email_address">
            Enter Your Email Address: </label>
        <input type=text name="UserEmail2" id="UserEmail2" class="input-text" style="width: 300px;">
        <p></p>
        <INPUT class="button-blue-dark button-round button-shadow" type="submit" name="Action" placeholder="Retrieve Your Username" />
    </div>
</form>
</body>
</html>

Open in new window

Steve Bohler

ASKER

Thanks!