CODEWITHSUNDEEP
jqueryjquery-mobilejquery-validate
RJuliao
RJuliao

Reputation: 87

jQuery mobile form validation mixed with default messages

I'm using jquery.validate.js to manage validations in my forms. In my form I have this line:

<input type="email" name="email" id="email" value="" />

In this line I have [ type="email" ]. So when I try to put a wrong e-mail in this field, the default validation message (in popup) show up. All anothers messages are show jquery.validate.js way.

How to fix it? What am I doing wrong?

Upvotes: 1

Views: 2750

Answers (3)

Sparky
Sparky

Reputation: 98758

Your code:

<input type="email" name="email" id="email" value="" />

It's working in my desktop browser: http://jsfiddle.net/WhH8a/. By "working", I'm seeing all messages, including the "email format" message, properly come from the Validation plugin.

The jQuery Validate plugin dynamically inserts a novalidate="novalidate" into the <form> element, which is supposed to disable HTML 5 form validation. However, maybe there's some reason why it doesn't work in your Mobile browser.

Since the Validate plugin disables HTML 5 validation, and you want to use the plugin in favor of HTML 5 validation, you might as well remove it from the markup...

... change type="email" to type="text".

If you want to use the email rule, do it as follows.

HTML:

<input type="text" name="email" id="email" value="" />

jQuery:

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        // other options,
        rules: {
            email: {
                required: true,
                email: true
            },
            // other rules
        }
    });

});

Working Demo: http://jsfiddle.net/TxN48/

Alternatively, these two rules can be specified inline within the class attribute:

HTML:

<input type="text" name="email" id="email" class="required email" value="" />

jQuery:

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        // other rules & options
    });

});

Working Demo: http://jsfiddle.net/TxN48/1/

Upvotes: 0

gpr
gpr

Reputation: 959

You can disable the browser validation of the new HTML5 form fields (including type=email) by adding the 'novalidate' attribute to the form tag.

e.g

<form method="post" action="" novalidate>...</form>

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191819

Change type=email to type=text. The submission even does not even get triggered because the browser is preventing it due to the type=email requirement.

Upvotes: 0

Related Questions