Search jQuery

jQuery Forum

validate plugin only validates required first and last tag.

in Using jQuery Plugins • 7 years ago

I am trying to validate a shopping cart fore submit and at this point only using the required directive. I am submitting the cart using ajax and I am trying to validate before doing the ajax call. When I call the validate() function, only the first and last tag shows an error. After the errors are shown, the rest of the items do show errors if I tab though them. If I fill out the first and last tag, then the form validates with the rest of the data missing. I have tried putting required as a class and or just text inside the tag but it doesn't seem to make a difference. cardholder_name and agreeterms are the tags that work. Here is some code. Thanks.

<form id="frm_cccheckou" action="/signup/processCC" method="post" enctype="multipart/form-data">
    <input type="hidden" id="clienttoken" value="<?php echo $this->getClientToken() ?>" />
    <label for="cardholder_name">Name On Card:</label>
    <input type="text" id="cardholder_name" required data-braintree-name="cardholder_name"  value="" />
    <label for="number">Creadit Card Number:</label>
    <input type="text"  id="number" required data-braintree-name="number" value="" />
    <label>Expireation Month / Year:</label>
    <table style="width:150px">
        <tr>
            <td>
                <input type="text" id="expiration_month" class="required" data-braintree-name="expiration_month" maxlength="2" value="" />
            </td>
            <td style="width:5px">/</td>
            <td>
                <input type="text" id="expiration_year" class="required" data-braintree-name="expiration_year" maxlength="2" value=""/>
            </td>
        </tr>
     </table>
    <div style="display: inline">
    <label style="width:100px;">Security Code:</label>
    <div style="width:80px;">
        <input type="text" id="cvv" class="required" data-braintree-name="cvv" maxlength="4" value=""/>
    </div>
    </div>

    <label for="agreeterms">I agree to the terms and conditions.</label>
    <input type="checkbox" class="required" id="agreeterms"  class="required" name="agreeterms" value="1" />
    <a class="ui-btn">View Terms and Conditions</a>
    <input type="button" class="btn_submit_payment" value="Submit Payment" />
</form>

And for the JS.

var $wrp = $("#frm_cccheckout");
var validate = $wrp.validate();
var isvalid = validate.form();
if(isvalid) {...}

Replies(11)

gautamx07

Re: validate plugin only validates required first and last tag.

7 years ago

the forma for validation shown on the validate.js plugin site is as follows :

var validator = new FormValidator('example_form', [{
name: 'req',
display: 'required',
rules: 'required'
}, {
name: 'alphanumeric',
rules: 'alpha_numeric'
}, {
name: 'password',
rules: 'required'
}, {
name: 'password_confirm',
display: 'password confirmation',
rules: 'required|matches[password]'
}, {
name: 'email',
rules: 'valid_email',
depends: function() {
return Math.random() > .5;
}
}, {
name: 'minlength',
display: 'min length',
rules: 'min_length[8]'
}], function(errors, event) {
if (errors.length > 0) {
// Show the errors
}
});

documentation page .

just a pointer , i am sure someone on here can advice you better . never used that plugin myself though .

kbwood.au

Re: validate plugin only validates required first and last tag.

7 years ago

If we knew which validation plugin you're using we could probably help more.

jimboidaho

Re: validate plugin only validates required first and last tag.

7 years ago

I am using the plugin from here. http://jqueryvalidation.org/. I just watched the video on the main page and it looks the validate() function was used just like I am using it. I have have marked is required for now. Tomorrow, I will try setting the rules in JS.

Thanks.

Sµßhrånil∂

Re: validate plugin only validates required first and last tag.

7 years ago

jquery validate plugin supports HTML 5 data tags as data rules if you don't want to mention rules in js code.

In your HTML you are not applying rules correctly

When you use HTML 5 data rules for validation then you need to write all rules using data property in html and in js you need to write single line to enabling the form validation plugin for you form like

var $wrp = $("#frm_cccheckout");
var validate = $wrp.validate();

Date rules are applied like

Required - data-rule-required="true"
Email - data-rule-email="true"
Minimum Length = data-rule-minlength="6"

See a sample here https://github.com/jzaefferer/jquery-validation/blob/master/demo/custom-messages-data-demo.html

jimboidaho

Re: validate plugin only validates required first and last tag.

7 years ago

I changed my HTML to data-rule-required="true" and there is no difference. I did notice that all input items has aria-required =" true " appended to the end after I run validate(). Still, only the first and last input tag is validated but if I tab through the rest of the tags, the empty message shows up. If I fill in the first "cardholder_name and check the last item "agreeterms" then the page validates and it should not.

I will try coding the rules when I have some time latter today.

Here is a link to my test server if you are interested.

http://lo.m2mc.us/signup

Thanks.

jimboidaho

Re: validate plugin only validates required first and last tag.

7 years ago

I found the problem. Looks like validate has to have a name property to work. I am using Braintree for a CC processor and they require data-braintree-name="" instead of name="". I fixed the problem by adding the name property.

Thanks.

watusiware

Re: validate plugin only validates required first and last tag.

7 years ago

Unrelated, you are unnecessarily loading the jQuery Mobile CSS twice. First you load the complete CSS, and then you load your custom theme, icons, and structure.

Also, I notice in your viewport meta you set height=device-height. You should not do this. Only set width=device-width.

As far as validation goes, I see you are using jquery.form. I wonder if this causes some problem with jquery.validate? As well, I wonder if the author makes any statement of compatibility with jQuery Mobile?

I don't see where you applied HTML5 data rules. You inconsistently use CSS classes and attributes with validation rules.

jimboidaho

Re: validate plugin only validates required first and last tag.

7 years ago

Hi watusiware.

First you load the complete CSS, and then you load your custom theme, icons, and structure.

Not sure about his. I load these in this order.

jquery.mobile.external-png-cur.min.css

my theme file

jquery.mobile.icons.min.css from my themes

jquery.mobile.structure-1.4.5.min.css

which one is the complete CSS?

Got rid of jquery.form and it didn't make a difference. I use validate on other pages without problems. I think the problem is not having name="" in the input tags and in this case I can't and comply with the PCI rules as Braintree dictates.

Thanks.

watusiware

Re: validate plugin only validates required first and last tag.

7 years ago

jquery.mobile.external-png-cur.min.css

That is the complete jQuery Mobile CSS with theme, icons, and structure. It is what you should load if you are NOT using a custom theme.

So, you unnecessarily load everything twice.

I think the problem is not having name="" in the input tags and in this case I can't and comply with the PCI rules as Braintree dictates.

I don't know what a "PCI rule" or "Braintree" are. but name="" is a requirement for jquery.validate , as well as for form submission. If you submit a form that has no name attributes, you will just submit an empty form, and your server will get no values.

I can't imagine why anybody would advise you to leave off name =.

jimboidaho

Re: Re: validate plugin only validates required first and last tag.

7 years ago

Braintree has a JS API that I use to send the CC info to them and they send back a key that I use to complete the payment process. This way I will never see the CC number or the CVV code for security purposes. I am afraid that if I add the name="" I will not pass the PCI audit so I guess I will have to do the validation myself. Thanks for help.

watusiware

Re: validate plugin only validates required first and last tag.

7 years ago

I'm guessing that Braintree has some JS that plays with the form prior to submission. You'd best check with them about what kind of twiddling they do, and how it might interfere with jquery.validate.

Top Reply

Response title

Attachments

jQuery Forum

validate plugin only validates required first and last tag.

Replies(11)

Re: validate plugin only validates required first and last tag.

Re: validate plugin only validates required first and last tag.

Re: validate plugin only validates required first and last tag.

Re: validate plugin only validates required first and last tag.

Re: validate plugin only validates required first and last tag.

Re: validate plugin only validates required first and last tag.

Re: validate plugin only validates required first and last tag.

Re: validate plugin only validates required first and last tag.

Re: validate plugin only validates required first and last tag.

Re: Re: validate plugin only validates required first and last tag.

Re: validate plugin only validates required first and last tag.

Statistics

Tags

Actions