JQuery Validation Plugin not working with Email type right?

Question

I have configured a Grunt file to build a single JS file with all my libraries and my code, so I only have the single JS file to included in my site. This is all working fine but I have just added the JQuery Validate plugin into it (http://jqueryvalidation.org/) and this plugin is working but not completely, I take it for red that its my code and how I have built it.

But I have a number of forms, and once of which is changing the users email. I should also say here that I am building the this site using CakePHP with its form helpers (although that side of the site is fully working without any errors).

This is the code I am using:

 $( "#EmailChange" ).validate({
    rules: {
        'data[Email][currentemail]':{ 
            required: true,
            email: true
        },
        'data[Email][newemail]':{
            required: true,
            email: true
        },
        'data[Email][emailconfirm]': {
            equalTo: "#NewEmail", <-id for the [email][newemail] input
            required: true,
            email: true
        }
    },
    messages: {
        'data[EmailUpdate][currentemail]': "email address is needed",
        'data[EmailUpdate][newemail]': "a vaild email address is needed",
        'data[EmailUpdate][emailconfirm]': "second email does not match",
    }
});

Now this works, sort of but does not verify my email address right, I will enter, someemail@something and this would remove or come back as valid email, before the domain suffix is entered. When I use the test field on the email on there own website, it does not do this, it only comes back as valid after the user inputs the suffix.

So what am I doing wrong?

Thanks.

please Provide 1)For which input validation should work 2)For which input validations SHOULD NOT work . — Pratik Joshi, Apr 29 '14 at 15:39
I am sorry I not sure I understand your question. All I want this to do is to display a error message on form submit if the email is missing or if the email type is not a valid type. Right now it is not doing that, but say xxx@xxx is valid and will allow that to be submitted to my server. — C0ol_Cod3r, Apr 29 '14 at 15:44
I am playing around with your code right now, thanks for it - I have just seen there is an extra file of methods for this plugin, should I included that into my Grunt build? — C0ol_Cod3r, Apr 29 '14 at 15:45
For reference check my site http://linux.aress.net/ESCtNewWeb/ — Pratik Joshi, Apr 29 '14 at 15:48
I have added it, but it keeps the error displayed even if the user competes a valid email type. — C0ol_Cod3r, Apr 29 '14 at 15:58
I try a JS fiddle - I am currently building this in a VM Lamp stack, so its offline - and it is inside cakephp so I see what I can do with JS fiddle — C0ol_Cod3r, Apr 29 '14 at 16:03
Question is clearly asked ,But when you use External Plugin as jquery validate,Please post fiddle with validate link in it Like this http://jsfiddle.net/7mKcY/,So it becomes less time consuming for Developers .Thanks. — Pratik Joshi, Apr 29 '14 at 16:25
OP, your question is **not** clearly asked as long as relevant code it missing. In this case, where is the HTML markup for the form? — Sparky, Apr 29 '14 at 16:55

Pratik Joshi · Accepted Answer · 2015-11-20T03:44:14.710

10

Use following code for email :

jQuery.validator.addMethod("validEmail", function(value, element) 
{
    if(value == '') 
        return true;
    var temp1;
    temp1 = true;
    var ind = value.indexOf('@');
    var str2=value.substr(ind+1);
    var str3=str2.substr(0,str2.indexOf('.'));
    if(str3.lastIndexOf('-')==(str3.length-1)||(str3.indexOf('-')!=str3.lastIndexOf('-')))
        return false;
    var str1=value.substr(0,ind);
    if((str1.lastIndexOf('_')==(str1.length-1))||(str1.lastIndexOf('.')==(str1.length-1))||(str1.lastIndexOf('-')==(str1.length-1)))
        return false;
    str = /(^[a-zA-Z0-9]+[\._-]{0,1})+([a-zA-Z0-9]+[_]{0,1})*@([a-zA-Z0-9]+[-]{0,1})+(\.[a-zA-Z0-9]+)*(\.[a-zA-Z]{2,3})$/;
    temp1 = str.test(value);
    return temp1;
}, "Please enter valid email.");

In rules use following

rules: {

    'data[Email][newemail]': {
        required: true,
        validEmail: true
    }
}

edited Nov 20 '15 at 03:44

answered Apr 29 '14 at 15:36

Pratik Joshi

11,485
7
41
73

That doesn't explain why the OP's code is behaving differently than the demo site. – Sparky Apr 29 '14 at 16:43
1

@Sparky , email which is Inbuilt mechanism of validate ,doesnt behave as expected.So The custom email validation is carried out.If email Default validation was Perfectly working ,He would not have the validation problem. – Pratik Joshi Apr 29 '14 at 16:50
Thanks for stating the obvious. However, I'd like to know ***why*** the OP's implementation is working differently than the official demo site. Quote OP: _"When I use the test field on the email on there [sic] own website, it does not do this"_ – Sparky Apr 29 '14 at 16:53
2

@Sparky ,Their Site also show Problem :) http://jqueryvalidation.org/files/demo/ And Type in email id on Top box => fe@d . It accepts :) haha – Pratik Joshi Apr 29 '14 at 16:58
1

Apparently, the email method was changed in the latest version for some reason. Please don't beg for up-votes… it almost makes me want to down-vote. – Sparky Apr 29 '14 at 16:59
I'm not arguing with you… I'm simply making a factual statement that something has recently changed. – Sparky Apr 29 '14 at 17:01

score 1 · Answer 2 · edited Mar 03 '17 at 12:38

jQuery Validate Plugin is using the same email validation as HTML standard does.

From the source of the jQuery Validate Plugin which links to http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29 which is outdated and should be now https://html.spec.whatwg.org/multipage/forms.html#valid-e-mail-address:

The following JavaScript- and Perl-compatible regular expression is an implementation of the above definition.
/^[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])?)*$/someemail@something

which is exactly what the plugin (currently in version 1.13.1) uses and which matches someemail@something as valid.

The reason HTML standard uses such specification is stated also on the spec site:

This requirement is a willful violation of RFC 5322, which defines a syntax for e-mail addresses that is simultaneously too strict (before the "@" character), too vague (after the "@" character), and too lax (allowing comments, whitespace characters, and quoted strings in manners unfamiliar to most users) to be of practical use here.

To sum up - if you don't like it, use custom validation functions for the Validation Plugin.

And a goog regex to use as a replacement can be found here: http://stackoverflow.com/a/46181/1600028 — hugronaphor, Mar 03 '17 at 10:33

score 0 · Answer 3 · answered Jun 20 '16 at 13:08

0

This problem is in jquery validation plugin version 14. Try using version 12 it works fine.

answered Jun 20 '16 at 13:08

user3759750

123
3
10

JQuery Validation Plugin not working with Email type right?

3 Answers3