jpillora / verifyjs

Verify.js - A powerful, customizable asynchronous validation library

Verify.js

A powerful asynchronous validation library

See demos and full documentation at:

http://verifyjs.jpillora.com/

MIT License

Copyright © 2013 Jaime Pillora <[email protected]>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

verifyjs's Issues

Group Rules

First, I'd like to say that this is beautifully done!

Second, I have a situation where I need to combine two form elements together so that if the first form element (textfield) is not empty then the second form element (select) needs to have a value too. I can't seem to figure out how to make that happen. I have several combinations of this type in the form, so is there anyway to do this?

problem wiith angularjs on submit

Hey! I'm using your beautiful plugin with angularjs and its ng-submit directive.
When the fiels are filled and datas correct, i see that the form loads instead of not. How cani fix it?

How can I add rules on-the-fly to a form field?

Hi, I've been using this plugin for validation and it's awesome!

The thing I'm trying to do is to add another rule on-the-fly to a form field that already has the data-validate="" attribute.

I tried modifying the $('input').data('validate') property, or even the attribute data-validate, but cannot get VerifyJS to apply the new rule(s) added.

Anyway, great work and congratulations!

Empty error message for "required" rule

This is my html

<input name="search_query"
style="padding:5px;width:200%" id="top_search_bar_query" type="text"
autocomplete="off" data-validate="required" placeholder="Search begins here..."
class="input-large clearable">

But on leaving the field empty it shows the blank error message.

Tip position

Can I set tip position? I use verify.notify.js and can't figure out how to set tip position to 'bottom center' in Notify.js notation.
I've tried this code:
$.verify({elementPosition: 'bottom center'});
but position of the tip doesn't changes and still is 'bottom left'.

Minor bugs

• Included Rules are not case-sensitive. (currently it works only with lowercase and not camelCase like in documentation)
• Broken link for Issues

Submit button issue with verify.notify.min.js

I would love to use your plug-in, it's cool and nice especially for validations.

One thing i've notice (on mine) that i was having issues with submit button. Validation is okay when i tried to submit a blank field, but when i filled up the fields, i have to double click the submit button to save. Kinda weird though.

any simple solutions to this? im using jquery-1.8+ (1.8 to 1.8.3) by the way, in combination with your plug-in

verify.js: Missing rule: alphaNumeric

Added data-validate="alphaNumeric" to a text input element. alphaNumeric validation is not executed.
Issue is reproducible in,

• Google Chrome Version 42.0.2311.152 m
• Mozilla Firefox Version 31.0
• Internet Explorer Version 11.0.9600.17358IS

Console Log:
verify.js: plugin added.
verify.js: Missing rule: alphaNumeric ---------------------- verify.notify.js:586

Reciprocal Validation between select field and text field

(E-mailed you about this, reposting here as requested)

I'm running into a snag with extending its capabilities and was wondering if you could advise. I'm a PHP guy and not quite a jQuery master.

I have a dropdown in my for for cell phone carrier and another field for cell phone. The trick is, if they select a carrier and don't enter a phone number, I need to prompt them to enter a phone number. If they enter a phone number and don't select a carrier, I need to prompt them to select a carrier.

I have no idea how to get this to work with verify.js, and was wondering if you could provide a bit of insight on where to start.

data-validate does not accept a space between rules

For a input field like this

ERROR is thrown :
verify.js: Invalid validate attribute: required, email

Cause

The space between rules is not accepted.

One notify prompt per form

Hello. Thank you for this very nice and simple validation lib.

Is it possible to validate not all inputs but till the error detected? I get notify boxes overlapping each other in some cases. I've tried to assign same group for all inputs, but it didn't help

Looking for contributors!

I really like using this library, best in class imho. I'm worried that it's been abandoned, though. @jpillora, can you verify?

"Object doesn't support this property or method" when using $.verify.updateRules

Hello,

I'm having an issue when trying to change the message of a default validation rule ("number"). My browser (IE8) is throwing me a "Object doesn't support this property or method" JS error.

    $.verify({errorClass: "error-form"});
    
    $.verify.updateRules({
        number: {
            message: "Hello world"
          }
        });

I'm using version Verify.js - v0.0.1 - 2013/06/12

verification success handler

a function which will be executed on successful validation of form is it available in verify js which can be used to notify users

Have a "debug" / "Troubleshooting" section of the documentation.

verify.js is wonderfully easy to use.

Except for when it does not work. Then it is like being given a space age awesome car that does not have an ignition switch. It should just turn on for you. But when it does not, there is nothing to fiddle with or look at to try and figure out what is going on.

It would be nice to have a trouble shooting section of the docs.

For me, I would like to see what should be done when the console says verify.js: plugin added at start up, but data-validate tags don't do anything. (And custom validations in them never get called.)

[enhancement] Add missing bower.json.

Hey, maintainer(s) of jpillora/verifyjs!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library jpillora/verifyjs is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "jpillora/verifyjs",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Am I able to add a custom message to a rule?

I love this library, it is so helpful! However, one thing I would like to be able to do is to add a custom validation message to rules that I list in data-validate. Am able to do this somehow? Something along the lines of data-validate="required(Custom validation message),number(another custom validation message)" or something similar is what I'm hoping to be able to do. If this is not yet a feature, I think it would make a great enhancement.

No CDN link is provided

It would be nice to have a CDN link such as the ones that are exposed here: http://cdnjs.com/ instead of pointing out directly to the raw Github repo. Anyway, it is just an improvement.

Can I validate equals elements?

Can I validate that the content of two elements are the same? How?

[bug] Demo broken ? Or whole project ?

Hey,

currently the basic usage demo on http://verifyjs.com is broken: The demo validates against numbers, and the demo values are "42" and "xx". Remove the values from the form fields and press submit - and it will validate successfully, which it should not :)

I think this gives the project a weird first impression. Can somebody have a look if this is on project side or just a typo etc inside the demo ?

And for sure a big thanks for a very well-looking project!

Successor project

@jpillora As this project is no longer under development, is there a logical successor to this?

Verifyjs for react

Hi, is there any chance of this library in reactjs?

Cannot use `$.verify.updateRules`

For context: http://stackoverflow.com/questions/32292284/how-to-change-the-message-of-verify-js

Upon logging Object.keys($.verify), updateRules is not shown. It seems like it's being created here:

verifyjs/src/modules/5.init.js

Line 50 in 2e9ef71

updateRules: ruleManager.updateRules,

but it doesn't actually have a ruleManager.updateRules to map to.

I understand this API is undergoing changes, but it seems like this will work once "wired" up correctly?

Thank you!

How to make validation message appear next to "Submit" button?

I have a very tall form, and if they make a mistake in the form (e.g. omitting a compulsory field) that is right at the top of the page, they don't see the popup when they push the button!

How can I make an additional error appear near the submit button?

Link for new issues is dead at http://verifyjs.com/#contributing

At the bottom of http://verifyjs.com there is a link to report issues on github.

It gives a 404.

The link is:

https://github.com/jpillora/verifyjs/issues=%22href=https://github.com/jpillora/verifyjs/issues%22

Validate on select

Hello,

I chose to use your library for my form's validation. It's really good work ;)

I would like to know if I can validate required select. On my select there is data-validate="required" but it doesn't work when the selected value is empty... Do you have a solution ?

wrong rule name

'alphanumeric' in script, but 'alphaNumeric' on http://verifyjs.com/

FieldExecution: #NN: [NN] pending... (waiting for #NN)

Verify.js is stopping my form being submitted, and the only clue is I keep getting that warning message, about waiting for something, in the console.log.

I've tried a few variations, but as one example I added this line to my form:
TEST:

And then, after submitting, in the log I see:
verify.js: FieldExecution: #9: [whatever] skip (not required)
verify.js: FieldExecution: #10: [3] pending... (waiting for #7)

That is the only data-validate line in the form. If I remove that line, my form goes back to submitting with no problems.

)

i18n

It would be great if we had a chance to localize verify's error-messages etc. I'd be happy to do the german translation, but I'm afraid I'm not (yet) well-versed enough with the whole environment to fork it and to do it myself.

it works, but hides the form?

So, It does exactly what I wanted it to.

However, if I create a text box, have verify.js validate it. when I click off the text box, the tooltip displays, and the text box hides..

Not sure why.

Update, I posted to quickly. I corrected the issue, it was a conflict of CSS property's.

Causes two submits

$(this.element).submit(event => {console.log('Submitted')}

Submitted gets logged twice. Once by JQuery catching submit. And once by verify.js sending the submit again.

The 'scroll' option is not working

According to the document, this option is on by default. And it is not working even I add 'scroll: true' to global config.

Tried use verifyjs in a quite simple stand-alone html page, nothing changed.

Plz fix this. Thanks.

Is it possible to add conditional verification

I am trying to work out if there is an easy method of adding conditional verification. For example, I have certain form fields which are only required if certain other fields are visible. Is there some way of conditionally setting a field as required when some other condition is met (e.g. the parent form fieldset is visible, etc.)?

Website is down, unable to find docs.

Hi there.

Looks like http://verifyjs.com/ is down for some time now.
Any chance to get the docs somewhere else, please?

Kind regards (and thanks for a great tool)

Add option for timeout value

Would be great to have an option in assertForAll and similar functions to specify what is timeout instead of always having it at 2000ms.

Scroll to Error

Hi,

I haven't had any luck getting the scroll to error feature to work. I have a very long form so when the user clicks on submit it seems like nothing happens. However, I was able to use the track feature to notify the user at the bottom of the form that there was an error:

$.verify({
track: function(type, fieldId, result) {
if(result!="Valid"){
$("#anyerror").notify("Mistakes were found! Please review the form, correct any errors and re-submit.", {arrowShow:false});
}
}
});

I really love this library, but there seems to be a few bugs in it.

Grunt and Gulp.js Plugins

Programming with Verify.js is insane and it should be included as part of the compilation step.

Regex rule is not working

I am trying to use the regex rule in the library here is code...

html

data-validate="required,regex(/^(ab\\+)$|^(ab\\-)$|^(a\\+)$|^(a\\-)$|^(b\\+)$|^(b\\-)$|^(o\\+)$|^(o\\-)$/i,Must contain a valid blood group.)"

Validation deletes pressed button from the POST request

Hi,
I'm using your wonderful framework on my web application but I discovered a big problem.
My web application is builed with Struts (v1) and verify cause problems with pages navigation.

In order to work, the Struts navigation need to know the pressed button but, if for example I have a form like the follow:

And I fill the fields and press back button

With yours framework in the POST content I'll get:
name=aaa&surname=bbb

while without yours framework I'll get this:
name=aaa&surname=bbb&back=back

And the last information its fundamental to get the Struts navigation working.

specify custom error message as an attribute

Hi!

I would love to specify the error message as an attribute in the input field... Is this possible or hard to make?

Best regards, Richard