posabsolute / jquery-validation-engine Goto Github PK

I've found a situation that may be generic enough for this scenario be part of the API.
I'm working in a huge multiplart form, that is made of lot's of different div's that I show or hide.
I then have a Save and Submit button. The Save enables me to save the fields that I have inserted values, and I can do this at any time. In this case I only want to validate the content of the fields ( regex expressions ) and not all fields of the form that are required.
In case I hit the submit button, I want to make sure that all content is valid but that all required fields of the form have data. So, it would be nice to call the validation and have a boolean to ignore the required ( default to false ).

Hi,
firstly I tell you that the AjaxValidator is exellent, but only one thing and that problem is to use Ajax. I know used to ajax by jQuery alone, but here I don't know, how to make it work.
I try use demo by http and local, but it's not working.
Local write: 'Please run this demo from a WebServer (ie. http://localhost:9173/demoAjax.html after running the demo server), it will fail if you double click demoAjax.html -> It needs a server.'

I read manual and answers to report of problem, but still I don't know, how to make it work.

Could you help me, should provide an illustrative example of how it really works in the itemized step by step, especially what to write in "ajaxUserCall" (url, etc.) in jquery.validationEngine-xx.js, what is in action="ajaxSubmitForm" etc.
Working demo is not necessary, but just write the specific parameters of functioning Ajax somewhere, I can understand it from that. I don't understand the instructions.
Thank you very much.
Houbeless

Hi

Do you know how to pass more than one parameters for Ajax validation?

Eg. If I want to check whether the username is being used, the Ajax magic will read the username and pass it to the Ajax method. Can I pass more than ONE parameters?

Thanks

Cheers,

Wil

(function($){
$.fn.validationEngineLanguage = function(){
};
$.validationEngineLanguage = {
newLang: function(){
$.validationEngineLanguage.allRules = {
"required": { // Add your regex rules here, you can take telephone as an example
"regex": "geen",
"alertText": "* Dit veld is verplicht",
"alertTextCheckboxMultiple": "* Selecteer a.u.b. een optie",
"alertTextCheckboxe": "* Dit selectievakje is verplicht"
},
"minSize": {
"regex": "none",
"alertText": "* Minimaal ",
"alertText2": " karakters toegestaan"
},
"maxSize": {
"regex": "none",
"alertText": "* Maximaal ",
"alertText2": " karakters toegestaan"
},
"min": {
"regex": "none",
"alertText": "* Minimale waarde is "
},
"max": {
"regex": "none",
"alertText": "* Maximale waarde is "
},
"past": {
"regex": "none",
"alertText": "* Datum voorafgaand aan "
},
"future": {
"regex": "none",
"alertText": "* Datum na "
},
"maxCheckbox": {
"regex": "none",
"alertText": "* Toegestane aantal vinkjes overschreden"
},
"minCheckbox": {
"regex": "none",
"alertText": "* Selecteer a.u.b. ",
"alertText2": " opties"
},
"equals": {
"regex": "none",
"alertText": "* Velden komen niet overeen"
},
"phone": {
// credit: jquery.h5validate.js / orefalo
"regex": /^([+][0-9]{1,3}[ .-])?([(]{1}[0-9]{2,6}[)])?([0-9 .-/]{3,20})((x|ext|extension)[ ]?[0-9]{1,4})?$/,
"alertText": "* Ongeldig telefoonnummer"
},
"email": {
// Simplified, was not working in the Iphone browser
"regex": /^([A-Za-z0-9_-.'])+@([A-Za-z0-9_-.])+.([A-Za-z]{2,6})$/,
"alertText": "* Ongeldig e-mailadres"
},
"integer": {
"regex": /^[-+]?\d+$/,
"alertText": "* Ongeldig geheel getal"
},
"number": {
// Number, including positive, negative, and floating decimal. credit: orefalo
"regex": /^[-+]?(([0-9]+)(.,)?|(.,)?)$/,
"alertText": "* Ongeldig drijvende comma getal"
},
"date": {
// Date in ISO format. Credit: bassistance
"regex": /^\d{4}[/-]\d{1,2}[/-]\d{1,2}$/,
"alertText": "* Ongeldige datum, formaat moet JJJJ-MM-DD zijn"
},
"ipv4": {
"regex": /^([1-9][0-9]{0,2})+.([1-9][0-9]{0,2})+.([1-9][0-9]{0,2})+.([1-9][0-9]{0,2})+$/,
"alertText": "* Ongeldig IP-adres"
},
"url": {
"regex": /^(https?|ftp)://(((([a-z]|\d|-|.||~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!$&'()+,;=]|:)@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]).(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]).(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]).(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|.|||[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))).)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|.|||[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))).?)(:\d)?)(/((([a-z]|\d|-|.||~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!$&'()_+,;=]|:|@)+(/(([a-z]|\d|-|.|||[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!$&'()*+,;=]|:|@)))?)?(?((([a-z]|\d|-|.|_||[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!$&'()*+,;=]|:|@)|[\uE000-\uF8FF]|/|?))?(#((([a-z]|\d|-|.||~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!$&'()_+,;=]|:|@)|/|?))?$/,
"alertText": " Ongeldige URL"
},
"onlyNumberSp": {
"regex": /^[0-9\ ]+$/,
"alertText": "* Alleen cijfers"
},
"onlyLetterSp": {
"regex": /^[a-zA-Z\ ']+$/,
"alertText": "* Alleen leestekens"
},
"onlyLetterNumber": {
"regex": /^[0-9a-zA-Z]+$/,
"alertText": "* Geen vreemde tekens toegestaan"
},
// --- CUSTOM RULES -- Those are specific to the demos, they can be removed or changed to your likings
"ajaxUserCall": {
"url": "ajaxValidateFieldUser",
// you may want to pass extra data on the ajax call
"extraData": "name=eric",
"alertText": "* Deze gebruiker bestaat al",
"alertTextLoad": "* Bezig met valideren, even geduld aub"
},
"ajaxNameCall": {
// remote json service location
"url": "ajaxValidateFieldName",
// error
"alertText": "* Deze naam bestaat al",
// if you provide an "alertTextOk", it will show as a green prompt when the field validates
"alertTextOk": "* Deze naam is beschikbaar",
// speaks by itself
"alertTextLoad": "* Bezig met valideren, even geduld aub"
},
"validate2fields": {
"alertText": "* Voer aub HELLO in"
}
};

    }
};
$.validationEngineLanguage.newLang();

})(jQuery);

Attempted to add another validator to check box, instead of showing "required" text, I would like it to show something like "Must agree to terms & conditions" So I went to a validationEngine-en.js added this

"terms": { // Add your regex rules here, you can take telephone as an example
"regex": "none",
"alertTextCheckboxe": "* You must agree to terms & conditions"
},

Then attempted to use it as validate[required,custom[terms]] and it simply ignores my custom message and goes with * Required from the "required" definition.

I had to stick my custom text in the "required" area to get it to work. Now all check boxes are asking for "You must agree"

Also, it would be great if this plugin supported grouping of variables. Here is a post that does so with the jQuery built-in functionality. Would be wonderful if this can be applied to this plugin>

http://encosia.com/2009/11/04/using-jquery-validation-with-asp-net-webforms/

Great work by the way, thank you for sharing and putting your hours into it.

This is what I get when validating my xhtml:

Error Line 60, Column 68: character "[" is not allowed in the value of attribute "class"
…t id="alias" name="alias" size="32" class="validate[required]" value="" />

Please change the syntax in a new major version.

Frameworks like JSF construct HTML element names by separating the id element with a colon character, e. g. myForm:nameInput. Attaching a validation prompt to this HTML element fails in Chrome when constructing and using a className:

var className = "." + field.attr("id") + "formError"; (line 980)

A similar effect exists in function hidePrompt.

since the update to version 2.0 our ajax[selector] function were using to connect to our database to validate the users email and user name has not been working, forced to use version 1.7 still

The file jquery.validationEngine.js has several missing semicolons and other issues that break the code when using tools like http://code.google.com/p/minify/ or http://www.minifyjavascript.com/ for compress/minify javascript code.

Date regex customization provided with stock version of ValidationEngine allows to incorrectly switch month and dayand dates like 2011-99-99.

I would like to propose a modification to the date customization regex from:

   "regex": /^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/, 

to:

   "regex": /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/, 

or if you want to restrict to 20th and 21st centuries:

   "regex": /^((19|20)\d\d)[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/, 

Best regards
Mariano

The ajax validation need a rewrite

Hi,

I would like do something like :

• user need to fill field1 or/and field2

I try do this mechanism with "funcCall" type but there are this instruction in "_validateField" method :

if(!required){
    if(field.val() == "") options.isError = false;
}

How can I implement this feature ?

I work on source code to suggest an solution.

Regards,
Stephane

like:
$form.validationEngine('onError', function(event, formElement){})
$form.validationEngine('onResolved', function(event, formElement){})

or functions to show prompt on all invalid fields

 $form.validationEngine('showAllErrors');

those function become handy if you have a form field which is spitted in diffenrent jquery tabs.
if i change the tab i want the prompt dissapear

$form.validationEngine('hide');

but i want to add a class to the tab to indicate an error in this tab.

$form.tabs({
  select: function(event, ui) { 
    $form.validationEngine('hide');
    $form.validationEngine('hasErrors?', function(){
       $(ui.item).addClass('has_error');
    });
  }
});

well kind of, need the correct tab of course, but you get the point :)

ps. great plugin by the way. like it !

Re-working my web framework to identify ajax form validation mode and spit out JSON instead of the normal web template it usually produces is far from trivial.

There should be an init option that works similarly to validate[ajax[ajaxUserCallPhp]] and allows me to specify an alternate ajax URL to validate the whole form with.

I have a text box that is using a regex pattern and is marked optional, however if I try to either tab through the field or if I try to submit the form without ever entering the field then the error is shown and the form will not submit.

i am having an issue with ie9 to where the validation is inline is active if form has been submitted once.

It was a nice idea, but it turns out, it is not really customizable, and really easy to repoduce using the success function

Hi,

ASP.NET webpages uses a default form element. I tried to add another one inside the other form element but then the script does not work.

How can I use your plugin without form elements?

Can elements not be grouped together as it goes with asp.net validators? Then you don't need the form element and can be very flexible.

Thanks!

Hello, I stumbled upon the really annoying error of not showing the error prompt when I tried using custom regex validation rules together with a custom ajax validation.
I managed to resolve the bug, by changing the following lines:

 if (!isAjaxValidator) {
     if (options.isError)
         methods._showPrompt(field, promptText, "", false, options);
     else
         methods._closePrompt(field);
 }

to the following:

 if (options.isError)
     methods._showPrompt(field, promptText, "", false, options);
 else if (!isAjaxValidator) {
     methods._closePrompt(field);
 }

It looks like everything is working fine now, although it might be better to give it another look.
Thank you for the great plugin,

kind regards
Lukas

It would be nice if changing the away from the default prompt position didn't cause the arrow to go away.

This is regarding version 2.1
The _past and _future rule are swapped with regards to the error message. The following two line changes should fix it to reflect the validation error messages.

line 693 is:
if (vdate > pdate ) {
it should be
if (vdate < pdate ) {

line 715 is:
if (vdate < pdate ) {
it should be:
if (vdate > pdate ) {

The _parseDate function improperly checks the relationship between dateParts and d.split('-').

line 860 is:
if(dateParts!==d)
it should be:
if(dateParts==d)

I'm not sure if I'm understanding the code correctly but I believe the option onValidationComplete is missing its associated function? I have an ajax based form I'd like to submit once validation has been successfully performed by validationEngine. There used to be an onSuccess function but it is no longer there.

I've added the code snippet below to re-enable this.

onValidationComplete: false,
// John Carbajal
// function associated with onValidationComplete
validationComplete: $.noop,

_onSubmitEvent:
...
if(options.onValidationComplete) {
// John Carbajal
// ensure the validationComplete function is defined
if (options.validationComplete == $.noop)
{
$.error('options.onValidationComplete is true but options.validationComplete is null');
return false;
}
else
{
options.validationComplete(form, r);
return false;
}
}

is there a built in way or a way to add a feature so that if the form is successfully validated, the submit button is disabled, restricting duplicate entries?

So I get the inline ajax validation - it's fairly straightforward. But it all falls apart when you start clicking submit. Without any ajax at all, submit does NOT submit the form if there are validation errors. However, submit ignores ajax validation errors and continues to submit the form. That is, unless ajaxFormValidation is set to true, in which case it insists on using form.action to validate the entire form, rather than ajax-validating each individual field and then submitting the form if they all pass.

If anyone has a workaround that lets me make the submit button "do the right thing" WITHOUT ajaxFormValidation turned on, I'd LOVE to hear it.

This tool is absolutely outstanding until you try to use the ajax functionality, in which case you proceed to pull out all of your hair.

this version below works for showPrompt, but version 2.0 in github does not. Differences ?
http://www.position-relative.net/creation/formValidator/js/jquery.validationEngine.js
I've made a long time to discover why it was not working and failing silently !!

When using others JS framework, we usually use jQuery.noConflict. Howver, translation files don't take care of that on the last lines of them :

$(document).ready(function() {  
    $.validationEngineLanguage.newLang();
});

Instead of that, this block should be rewrite to take care of the noConflict use and the fact that we can't use "$" without protected mode to prevent this block to generate errors.

Hi, is it possible to add play framework support

No matter what I put, it uses it in the default position instead.

$('#divAgree2').validationEngine('showPrompt', '* This checkbox is required', 'checkbox', 'bottomRight', true);

Hi,
I want to ask you, if it's possible to merge two types of validation.
I use funcCall: At least one field is required, and I would need, in addition to this function was applied other features to individual fields, in my case: custom[number].
Can this be done?
Thanks for help

If you have multiple dialogs fading out and being removed at the same time only one of them is removed, the rest are opacity 0 but still there blocking input if they overlay other fields.

about line 588 change to
var closingPrompt = "."+linkTofield;

Fix is to make sure that closingPrompt is a local variable and is not overwritten in the next call of the function (for the other box).

Hi,

fighting some hours with that. I am using jQuery 1.5 together with your lib. I created a login form where the login is validated on submit via AJAX. This works ok for the first time. The prompt appears and everything is fine. Now i hit submit again (still with wrong credentials) and even though the AJAX response sent an error, the prompt goes away.

I debugged this monster for some hours. The point is, the DIV gets removed somehow. I made the following dirty hack:

    _showPrompt: function(field, promptText, type, ajaxed, options) {
        var prompt = methods._getPrompt(field);
        if (prompt) {
            //methods._updatePrompt(field, prompt, promptText, type, ajaxed, options)
            methods._buildPrompt(field, promptText, type, ajaxed, options);
        }
        else {
            methods._buildPrompt(field, promptText, type, ajaxed, options);
        }
    },

see the updatePrompt() which i commented out and replaced with _buildPrompt(). This way all works but its not intented how it should work. But it gets stranger. If i am in debug mode, i dont get this behavior. As soon as i try to debug it, everything works fine. Without debugging, i am getting this issue. I know, this sounds strange.

I am afraid that this might be non-reproducable for others but perhaps its worth a try.

Marc

When using multiple function rules (as in validateCustom1() & validateCUstom2() at the same time, if one is false the otehr do not pass

Hi,

I have just realized your Ajax sample (from the latest download) doesn't work (demoAjax.html). I'm trying to validate an email address whether it has already registered in the system.

in jquery.validationEngine-en.js file added the following ....................

"ajaxUserCall": {
"url": "http://localhost:8080/iicube/validateUserAjax",
"alertText": "* This email address has been registered",
"alertTextOk": "* This email address is available",
"alertTextLoad": "* Validating, please wait"
},

in html file added the following ......................

For some reason, http://localhost:8080/iicube/validateUserAjax is not being triggered. Any thought on this?

Cheers,

Wilkins

With an
The validator doesn't warn if no file is selected.

Hi,

I'm using jquery ui to have custom select drop down menu. My select drop down is required but nothing happen when you don't select anything. But all popups work fine on the rest of the form.

What I need to do to make it work?

Regards

actually works with Windows, - but not for Linux...

I wanted to be able to output a server message like it is possible with AjaxFormValidation.

Here's the updated code (lines 808ff). Working with response ["id", boolean,"message"]. If message is not set alertText resp alertTextOk is used:

if (errorField.length == 1) {
var status = json[1];
// Display message from server!
var msg = json[2];
if (!status) {
// Houston we got a problem
options.ajaxValidCache[errorFieldId] = false;
options.isError = true;
// Server Message
if (msg) var promptText = msg;
else var promptText = rule.alertText;
methods._showPrompt(errorField, promptText, "", true, options);
} else {
if (options.ajaxValidCache[errorFieldId] !== undefined)
options.ajaxValidCache[errorFieldId] = true;
// see if we should display a green prompt
// Server Message
if (msg) var alertTextOk = msg;
else var alertTextOk = rule.alertTextOk;
if (alertTextOk)
methods._showPrompt(errorField, alertTextOk, "pass", true, options);
else
methods._closePrompt(errorField);
}
}

Serialize form and send it as a parameter to the sucess function

I have added the following and I thought it may be useful enough to other people to pass along

"postcode": {
"regex": /^([A-PR-UWYZ0-9][A-HK-Y0-9][AEHMNPRTVXY0-9]?[ABEHMNPRVWXY0-9]? {1,2}[0-9][ABD-HJLN-UW-Z]{2}|GIR 0AA)$/,
"alertText": "* Invalid postcode"
},

If field is not required, the engine shall skip validations.

I know how to fix this one, need to check for empty string before each validations.

Hi, I'm looking into your source and see that your regular expression for IPv4 recognition can be improved. As it looks today, an IP like 999.999.999.999 is allowed -- which it shouldn't. A better pattern for IP matching is;

^\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b$

I downloaded the zip, uploaded the files to server, and tested code. After failing several times with the .closure.js I tried the source. It worked fine. I ran the closure compiler on the source and it compiled to nearly 1k larger, but worked fully. Just thought I would let you know.

Code that was failing was:
var valid_city = $("#theForm").validationEngine('validateField', "#City");

Well first of all thanks for this grate tool, but i have this issue:

I have my Index.html, that have a section that will be replaced with my indexContent.html on the onload event of the body, then, my indexContent.html uses the jQuery-Validation-Engine, but it does not show the bubble errors :-( I have tried import the js's and css's from both, mi index.html, and my indexContent.html with no success.

Here is the indexContet.html working fine http://vitasoft.no-ip.org/SINDESY/indexContent.html

but when i call it winth ajax in the index.html just fails: http://vitasoft.no-ip.org/SINDESY/

My regards. :-)

I'm not sure why this is working, but the regex for email in jquery.validationEngine-en.js appears to be incorrect.

Currently it is /^[a-zA-Z0-9_\.\-]+\@([a-zA-Z0-9\-]+\.)+\.[a-zA-Z0-9]{2,4}$/

I think it should be /^[a-zA-Z0-9_\.\-]+\@([a-zA-Z0-9\-]+\.)+[a-zA-Z0-9]{2,4}$/

Not sure why, but this regex still passes an email address in the validation engine. However I cannot get it to pass in something like this:

document.write('[email protected]'.match(/^[a-zA-Z0-9_\.\-]+\@([a-zA-Z0-9\-]+\.)+\.[a-zA-Z0-9]{2,4}$/));

PS. Thanks for the great script.

i'm trying out your demo , it doesn't seem work too

Idea: create some I18N inner class with method text(key) that returns a translated text if it loaded, else the default english text (always loaded).

It's going to become difficult to maintain as the number of translations increase with time otherwise.

As such, if you have a fixed position overlay with a scrollable background, your prompts will scroll away from the form with the background.

After calling $('#formID1').validationEngine('hide') or $('#formID1').validationEngine('hideAll') the bubles loose seem to get the default position (topLeft) even if we changed that on setup to other position (topRight).