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, Sep 12 '14 at 06:27
Latest browser version provide . It validate email input automatically on form submit. — herr, Sep 12 '14 at 06:59
Thanks guys for mentioning 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, Sep 12 '14 at 07:17
Your question Duplicate of http://stackoverflow.com/questions/20573488/why-does-html5-form-validation-allow-emails-without-a-dot — herr, Sep 12 '14 at 07:27
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 is only valid for HTML5? — stadisco, Sep 12 '14 at 07:41
As I know it will work for XHTML but with or with end/close tag. — herr, Sep 12 '14 at 07:52
One more question @herr will I need server-side validation or will be enough ? — stadisco, Sep 12 '14 at 08:33

Pawan · Answer 1 · 2014-09-12T08:36:29.463

1

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

edited Sep 12 '14 at 08:36

answered Sep 12 '14 at 06:25

Pawan

1,704
1
16
37

This code is not working for me. I also tested it in WordPress 2012 Theme. My Google Form continues to submit any text without displaying error. What could be the problem? Or is there an alternative method? Somebody above mentioned and that worked but it is not super effective because it does not check for "periods". There must be a way? – stadisco Sep 12 '14 at 07:15
Have you added jquery file reference ? – Pawan Sep 12 '14 at 07:43
Yes I think, but can you post what you mean by jquery file reference - maybe I am making a mistake. Don't know why jquery is not working for me. Initially I tried a jquery validation plugin by following [this tutorial](http://morning.am/tutorials/google-forms-and-jquery-validation/) but it gave incorrect errors such as "Please enter a number greater than 0" for an email field. But a plugin seems unnecessary for a simple task, right? – stadisco Sep 12 '14 at 08:15

Validate Email in Google Forms

1 Answers1