Custom Verify.js validation rule not applying

0
votes

I'm using a new plugin to validate form fields called Verify.js, everything has been working great, until I started trying to create my own custom validation rules.

Here is the link to their documentation, where it explains how to create custom validations: http://verifyjs.com/#custom-rules

Even more helpful, is this example posted on JSfiddle by the plugin author: http://jsfiddle.net/jpillora/R4t84/1/ I copied the code format here almost precisely, yet it still doesn't work.

Right now, I am trying to get the form to not submit if the user has not selected the input field #YesExact. It is a very simple form validation, just trying to get this to work so I get the hang of writing custom validation rules with Verify.js

The HTML markup for the form field is like this:

p class="regular-content option-label">Do you know the exact size of your order?</p>
    <input name="YesExact" id="YesExact" data-validate="checkExact" type="button" class="btn btn-tca padding-button" value="Yes">

The javascript I wrote that has the custom validation rule is written like this:

// custom form validation
$.verify.addRules({
    checkExact: function (r) {
        if ($('#YesExact').val() === "") {
            $('#YesExact').notify("Please tell us you know the exact amount!", "error");
            return "Please tell us you know the exact amount!" false;
        }
        return true;
    }
});

This looks like it should totally work, I followed the example very closely. However, I have one major clue as to why it doesn't work... the javascript console says:

verify.js: Missing rule: checkExact

So how am I supposed to fix this? Where Verify.js can find the rule?

The webpage is HERE if you want to go check it out for yourself.

Thanks in advance for your help.

2
javascriptjqueryhtmlvalidation

2 Answers

1
votes

You have a syntax error at:

return "Please tell us you know the exact amount!" false;

change to return false;

You should also make sure to only set its value when clicked, as well as the "No" button, and then check if either are set, otherwise your validation will always return true. Though a better way in my opinion would be to have their clicks trigger the setting of a hidden field to either true or false which you could easily pull as a boolean server side.

0
votes

I fixed this problem by including the verify.js script at the bottom of the file just before the closing body tag, assuming that your jquery file is also included before these below statements, and assuming that inputs are properly enclosed in <form> tag

<script src="js/Verfify.js" type="text/javascript"></script> <script src="../yourFolder/yourJavascriptFileWithVerifyRules.js"> </body>

Also your return statement is wrong

return "Please tell us you know the exact amount!" false;

should be

return false;