jQuery Validate Text Field as Email

JavaScript
1

Hi there,
We use a third-party for form submissions so I don’t have access to the form itself. Given that, for the email input they use type=“text”. This is an issue with jQuery Validate plugin (bassistance.de). I cannot validate that field as a email. Also, from my research, I cannot change the type to type=“email” as there are errors thrown in IE.

So - here is my question. Is it possible with the jQuery plugin to validate a text field as email. Note, the IDs and names of the email field change from form to form so I cannot affect this field by its name. However, the email field is always in an <li> with a class of email: <li class="email"><input type="text" name="random_letters" id="random_letters">

Can I validate this text field as email by something like this (example):

<script>
    // Validation
    $( "#leadform" ).validate({
        rules: {
            li.email input: {
                required: true,
                email: true
            }
        }
    });
</script>

Is it possible? What would the snippet of JS be? Thanks!

2

That should not be the case. If the browser doesn’t recognize type=“email” it will get treated as type=“text”. You should revisit this.

This is how I validate my e-mail field and password field. Tinker with this.

$("#login").validate({
  errorClass: "error",
  errorElement: "span",
  rules: {
    password: {
      required: true,
      minlength: 5
    },
    email: {
      required: true,
      email: true
    }
  },
  messages: {
    password: {
      required: "Please provide a password",
      minlength: "Your password must be at least 5 characters long"
    },
    email: "Please enter a valid email address"
  }
});
3

Thanks Ryan - what I meant was that I do not have access to the email field to actually change the type. So I fiddled with jQuery changing the type from text to email in the browser and this is where IE throws errors.

Also, the validate plugin can validate a text field as email http://jqueryvalidation.org/email-method/ but I want to know how to get to this field via its parent element: li > class email > field as email.

The name & ID of the field is randomly generated, I cannot assume any name. It has to be generic “input”. The parent LI always has a class of email.

Example:

rules: {
            li.email input: {
                required: true,
                email: true
            }
        }

Hope that brings clarity.

4

Hey,

You can do it by selecting the element you wish to apply the rules to:

$("li.email > input")

and using the validator plugin’s add method to create your rule:

$("li.email > input").rules("add", {
  required: true,
  email: true
});

DEMO

1 Like
5

@Pullo - Awesome. That is exactly what I wanted. Thanks for the help. Much appreciated.

6

No worries : )

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.