jQuery validation with data attributes after validation

Question

I am using jQuery validate rule with data attributes, which is working fine but once required field is validated, rest of jquery code doesn't work. So it does validate ItemID, but after that success function doesn't work.

Here is the code:

HTML

<input type="text" name="itemID" id="itemID" class="required" data-rule-required="true" data-msg-required="Please enter an item to search">

Jquery

<script>
$(document).ready(function()
{
    var validator = $("#Form").validate(
    {
        errorClass: 'validateError',
        errorContainer: ".EmphasisDanger",
        wrapper: "li"
    },
    success: function(){
       stItems = $('#itemID').val().replace(/(?:\r\n|\r|\n)/g, ',');
        document.Form.target='_parent';
        document.Form.action='/admin/system/index.cfm?JobIDs=' + stItems;
        document.Form.submit();
        });
});

You have malformed braces, and the `success` function is misplaced. Refer to the docs: https://jqueryvalidation.org/validate/#success — Sparky, Mar 15 '17 at 04:17
You should also pay attention to this: [Dangerous implications of Allman style in JavaScript](http://stackoverflow.com/questions/11247328/dangerous-implications-of-allman-style-in-javascript) — Sparky, Mar 15 '17 at 04:22

Sparky · Accepted Answer · 2017-03-15T04:23:19.907

Your structure makes no sense.

It should look like this... notice the placement of commas and braces...

$(document).ready(function() {

    var validator = $("#Form").validate({
        errorClass: 'validateError',
        errorContainer: ".EmphasisDanger",
        wrapper: "li",
        success: function() {
            .... 
        }
    });

});

As per the docs for the success callback function,

If specified, the error label is displayed to show a valid element. If a String is given, it is added as a class to the label. If a Function is given, it is called with the label (as a jQuery object) and the validated input (as a DOM element). The label can be used to add a text like "ok!".

In other words, the success function is not where you'd put the submit.

Perhaps, you meant to use the submitHandler callback function...

$(document).ready(function() {

    var validator = $("#Form").validate({
        errorClass: 'validateError',
        errorContainer: ".EmphasisDanger",
        wrapper: "li",
        submitHandler: function(form) {
            ....
            // use the 'form' argument provided by the developer
            form.submit();
        }
    });

});

jQuery validation with data attributes after validation

1 Answers1