Validate Email in Google Forms

Question

I am using a Google Form to collect name and email addresses for newsletter sign ups. The email address field is simply a text field in Google Forms therefore it will accept any text.

My goal is to validate the email address to ensure that an email address has been entered and not any ole text. Below is code for the Google Form. What code can I add to it in order to validate the email address field?

<form action="http://spreadsheets.google.com/formResponse?key=pqbhTz7PIHum_4qKEdbUWVg&amp;embedded=true" method="post" target="hidden_iframe" onsubmit="submitted=true;">

<h1>Styled Google form with confirmation redirect</h1>
<div class="errorbox-good">
<div class="ss-form-entry"><label for="entry_1" class="ss-q-title">Your Name?
</label>
<label for="entry_1" class="ss-q-help"></label>
<input type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1"></div></div>
<br> <div class="errorbox-good">
<div class="ss-form-entry"><label for="entry_2" class="ss-q-title">Your Email?
</label>
<label for="entry_2" class="ss-q-help"></label>
<input type="text" name="entry.2.single" value="" class="ss-q-short" id="entry_2"></div></div>
<br> <div class="errorbox-good">
<div class="ss-form-entry"><label for="entry_3" class="ss-q-title">How easy was this tutorial?
</label>

<label for="entry_3" class="ss-q-help"></label>
<ul class="ss-choices"><li class="ss-choice-item"><input type="radio" name="entry.3.group" value="Very easy!" class="ss-form-input" id="group_3_1">
<label class="ss-choice-label" for="group_3_1">Very easy!</label></li> <li class="ss-choice-item"><input type="radio" name="entry.3.group" value="Pretty easy" class="ss-form-input" id="group_3_2">
<label class="ss-choice-label" for="group_3_2">Pretty easy</label></li> <li class="ss-choice-item"><input type="radio" name="entry.3.group" value="Not easy" class="ss-form-input" id="group_3_3">
<label class="ss-choice-label" for="group_3_3">Not easy</label></li>
</ul></div></div>
<br>
<input type="hidden" name="pageNumber" value="0">
<input type="hidden" name="backupCache" value="">
<input type="submit" name="submit" value="Submit">
</form>

You can also use Required Field. Add required="" in your input tag and also type = "email" for email valifation — Shivam Pandya
Latest browser version provide <input type="email">. It validate email input automatically on form submit. — herr
Thanks guys for mentioning <input type="email"> This did work for me, but it does not check for "periods" which is a bummer. Therefore it will accept an email such as bob@yahoo without the .com ----- Please let me know of any other methods! — stadisco
Your question Duplicate of stackoverflow.com/questions/20573488/… — herr
Thanks for sharing that link @herr This is working for me and it is so simple. But, one question, does it matter if I am using XHTML? Is is true that <input type="email"> is only valid for HTML5? — stadisco

Pawan Pawan · Accepted Answer · 2014-09-12T06:25:45

You can easily validate email in jquery using regex as:

<script type="text/javascript">

function ValidateEmail(email) {
    var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    return expr.test(email);
};
$("#btnsubmit").on("click", function () {
    if (!ValidateEmail($("#entry_2").val())) {
        alert("Invalid email address.");
        return false;
    }
    else {
         // Valid email address
    }
});

</script>

And assign an id to your submit button as:

<input type="submit" name="submit" id='btnsubmit' value="Submit">

Add Jquery reference on your form as:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

DEMO

Validate Email in Google Forms

1 Answers