Not a good idea to hack a module, but a quick solution to this is to change the email field sml_emailinput to an HTML5 email field rather than a text field, Line 85 of sml.php:
$return .= '<p class="sml_email"><label class="sml_emaillabel" for="sml_email">'.$emailtxt.'</label><input class="sml_emailinput" name="sml_email" placeholder="'.$emailholder.'" type="email" value="" required="required"></p>';
- changed type=”text” to type=”email”
- added required=”required”
Agreed this would be a good feature. Yes please 🙂
(Hesitant to hack module and have to re-do after any update)
I too was frustrated by this lack of form validation. What an oversight IMO. Anyway, this is what I did. Ideally, place this JQuery code in your HTML <head> tags, but anywhere at all in the page will do. A lot of my code like this ends up in a footer <div>.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('input[name="submit"]').bind('click', function() {
var nameLength = jQuery('input[name="sml_name"]').val().length;
if (nameLength < 3) {
alert ("Please enter at least 3 letters for name");
return false;
}
var pattern=/(^[a-zA-Z_.+-]+)@([a-zA-Z_-]+).([a-zA-Z]{2,4}$)/i;
var email = jQuery('input[name="sml_email"]').val();
if (pattern.test(email))
return true;
else {
alert ("Please enter a valid email address");
return false;
}
});
});
</script>
– Jeff Weiss
Hi i have added 2 radio buttons on the subscription form, but i can make the error appear..please advise what’s wrong with my code..THANKS!
<script type=”text/javascript”>
jQuery(document).ready(function() {
jQuery(‘input[name=”submit”]’).bind(‘click’, function() {
var nameLength = jQuery(‘input[name=”sml_name”]’).val().length;
if (nameLength < 3) {
alert (“Please enter at least 3 letters for name”);
return false;
}
var pattern=/(^[a-zA-Z_.+-]+)@([a-zA-Z_-]+).([a-zA-Z]{2,4}$)/i;
var email = jQuery(‘input[name=”sml_email”]’).val();
if (pattern.test(email)) {
return true;
}
else {
alert (“Please enter a valid email address”);
return false;
}
if (jQuery(“input[name=’sml_age_13_up’]”).is(‘:checked’)) {
return true;
}
else {
alert(‘Please confirm age.’);
return false;
}
});
});
</script>
I suggest changing Line #9 of zip.xerces (Jeff Weiss) code to this:
var pattern=/(^[a-zA-Z0-9_.+-]+)@([a-zA-Z0-9_.-]+).([a-zA-Z]{2,15}$)/i;
The way Jeff’s code is written, the following VALID emails will all Fail with an Error:
andrew0@email.com
andrew@99email.com
andrew@email.co.uk
andrew0@email.international
etc…
The code change I supplied should fix those.
Thanks and great work, by the way, Jeff!
Your code is very useful.
-Andrew
Another fix:
Line #3 can be changed to this:
jQuery('input.sml_submitbtn').bind('click', function() {
The ‘input[name=”submit”]‘ portion of the original code, will target ANY Input Button on that page, which carries the name “submit” (which most Input Buttons do).
I have a comment box on my site, and I noticed that it was triggering the warning messages incorrectly, when I attempted to submit a comment.
This fix I made, solves the problem.
