Hi, I’ve been trying a few email validation methods using jQuery for the mailing list signup form, but none seem to be working.
Do you know how to validate the mail on page?
Thanks!
This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.
The active forums are here.
February 13, 2011 1:53pm
Subscribe [4]#1 / Feb 13, 2011 1:53pm
Hi, I’ve been trying a few email validation methods using jQuery for the mailing list signup form, but none seem to be working.
Do you know how to validate the mail on page?
Thanks!
#2 / Feb 14, 2011 3:37am
maxi,
Moving this to the CodeShare Corner but here are some pointers
<!DOCTYPE HTML>
<html>
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript' src='https://ajax.microsoft.com/ajax/jQuery.Validate/1.7/jQuery.Validate.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#mailinglist_form').validate({
rules: {
email: {
required: true,
email: true
}
},
messages: {
email: 'Please enter a valid email address'
}
});
});
</script>
<style>
label.error {
color: red;
display: inline;
float:left;
width:auto;
}
</style>
</head>
<body>
{exp:mailinglist:form list='default' form_id='mailinglist_form'}
<p>Join our Mailing List</p>
<p><input type='text' name='email' value='{email}' /></p>
<p><input type='submit' value='submit' /></p>
{/exp:mailinglist:form}
</body>
</html>#3 / Feb 14, 2011 4:10am
Yay! it works, thanks a lot 😊
#4 / Feb 14, 2011 5:13am
If working with an HTLML5 doctype, changing the fieldtype to “email” will give you a future proof client-side validation in browsers that support it.
#5 / Feb 14, 2011 5:22am
Oh nice point, however the validation fails if I use type=“email” instead of type=“text”
#6 / Feb 14, 2011 5:32am
Hi there maxi,
Sorry, no time currently to see why that is with the proposed solution, but I have used jQuery.html5form in the past. My tests with it didn’t show any problem ... but, by all means, do run yours. Other alternatives are out there as well. Pick the one best suiting your needs.
Seminal article on the topic on ALA.
... not very EE related but hey ;o)
#7 / Feb 14, 2011 5:48am
Oh, sounds good, I will give it a try, thanks 😊
#8 / Jun 22, 2011 7:43pm
Trying to get the mailing list module working, but I get this error when I test a valid email address:
You must submit an email address
Invalid email address
Return to Previous PageI’m using HTML5, jQuery 1.6.1, jQuery.html5form and EE v2.2.
Here is my code:
$(document).ready(function(){
$('#mailinglist_form').html5form({
emptyMessage : 'Please enter your email address',
emailMessage : 'This email address is not valid, please try again',
responseDiv : '#error'
});
});
...
{exp:mailinglist:form list="default" form_id="mailinglist_form"}
<input class="email" placeholder="Email Address" type="email" value="{email}" required="required" />
<input class="submit" type="submit" value="Join" />
{/exp:mailinglist:form}The JS validation seems to work fine but I always get the EE error. Any thoughts?
#9 / Jun 22, 2011 8:18pm
Nevermind, silly mistake. I was missing the name attributes for the input elements.