victorjonsson / jquery-form-validator Goto Github PK

Please support more validations from https://github.com/arthurdejong/python-stdnum/ , for example the Dutch

Implementing these will widen support for localized data entry.

The error message that normally has to been set that the input object is the parent object, fails on JQueryMobile pages.

The validator sets the error message everytime before the form close tag.

If the 'country' menu is opened, resize the window and it does not follow its field.

I do not know css enough, perhaps it is possible to 'anchor' it to its field bottom-left corner.

Resizing the window is mainly to avoid the problem if you are on a tablet and turn it, landscape <>portrait.

When using the validating-server-side class to display a ajax-loader style gif whilst the server side validation is being run, it becomes a problem if you have more than one input field using the server side validation. Both input fields display the gif because the whole form gets the validating-server-side class.
Could it be modified to take this into consideration?

Few items in the urlFilter can be enhanced, I made lot of tests bu test it against a 'full' set, there are so many possibilities and regex can be so...
Here are the Find-Replace by, must apply them in the following order.

(https|http|ftp) by (https?|ftp)

\u00A0 by a space = char 32

As \w covers a-zA-Z0-9_
we can use it, uppercase does not matter
[a-z]|\d|-|.|_|| by \w|-|.||

based on ascii values,
21! 24$ 3B; 3D=
but from $ to , it is a continuous sequence in ascii from 26 to 2C
[!$&'()*+,;=] by [!$;=[&-,]]

the IP numeric string can be replaced by
((AAA(.AAA){3})

where AAA is
(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])

That's all.
If it is correct we had 1200 characters and now 966, between / and ;
Big deal :-o

For info on:
[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]
See http://en.wikipedia.org/wiki/Punycode

That would be a huge gain, if it can be replaced by a 'pattern', don't now if the \1 or $1 backward is working in Javascript in a search (not within a replace)
e.g. blaxyzblablaxyzmnonxyzbalbla
becomes
bla(xyz)blabla\1mnon\1balbla
The first () stores it and then use it afterwards.
But I think JavaScript does not support that kind of backward.

This one is shorter to find IP but need to be tested... it depends of the items around it.
([01]?\d?\d|2[0-4]\d|25[0-5]).
but the AAA solution above is enough.

Thank you.

For formUtils.addValidator, this can be replaced, \w = a-zA-Z0-9_
!(/[^a-zA-Z0-9_\+\.-]/.test(emailParts[0]));
by
!(/[^\w\+\.\-]/.test(emailParts[0]));

And below, two lines have
[0-9.........
by
[\d........

And, minus is move at the beginning to avoid the -
if (domain.replace(/[0-9a-z.-]/g, '')
by
if (domain.replace(/[-\da-z.]/g, '')
End...

I have noticed that the help message does not display when error message visible on another field.

It seems that when changing fields, the error message fades from field A, but this fade prevents the plugin from seeing the change of focus and triggering the help message to be displayed on field B.

I do not have enough time to supply a code fix at the moment, but will do so as soon as possible.

Domain in email and url invalid with capital letters. Suggested solution to convert value to lowercase for consistent checks during validation. Code commit in my pull request.

link in readme.md pointing to http://victorjonsson.se/jquery-form-validator results in page not found error message

this is rather a question than an issue report.

is there a way to revalidate or re-enable the validation e.g. after a in-browser change of the form (e.g. add some special inputs after checking a checkbox)

currently I try to re-run this function. the problem here is, that the onSuccess callback is fired twice when executing enableValidation twice.

var enableValidation = function () {
    $.validate({
        onError : function () {
            alert('Validation failed');
        },
        onSuccess : function () {
            alert('Validation failed');
        }
    });
};

Hope you understand what I mean :-)

With a date validation, the field says invalid whenever I choose a date with date picker. If I focus on the field again, it says it's valid.

Another problem occurs when the field is marked invalid (e.g., if it's blank), and I go back to select a date. It still says invalid until submit or re-focusing.

I was hacking through the code and I think the class for the error message is fixed/hardcoded for the messages that go in the element (instead of the top of the form).

// Display error message below input field
else {
    for (var i = 0; i < errorInputs.length; i++) {
        var parent = errorInputs[i].parent();
        var errorSpan = parent.find('span[class=jquery_form_error_message]');
        if (errorSpan.length > 0) {
            errorSpan.eq(0).text(errorInputs[i].attr('data-validation-current-error'));
        } else {
            parent.append('<span class="jquery_form_error_message">' + errorInputs[i].attr('data-validation-current-error') + '</span>');
        }
    }
}
return false;

Maybe it should be like this:

// Display error message below input field
else {
    for (var i = 0; i < errorInputs.length; i++) {
        var parent = errorInputs[i].parent();
        var errorSpan = parent.find('span[class=' + config.errorMessageClass + ']');
        if (errorSpan.length > 0) {
            errorSpan.eq(0).text(errorInputs[i].attr('data-validation-current-error'));
        } else {
            parent.append('<span class="' + config.errorMessageClass + '">' + errorInputs[i].attr('data-validation-current-error') + '</span>');
        }
    }
}
return false;

Another nice adition would be to make the element of the message customizable (the span, in this case).

Anyway, great work!

Checkbox group does not become validated immediately when the input looses focus; it is validated only when the submit button is clicked. Every other types of validations work fine and become validated when blurred by default.

Could you please look into it?
Is there a demo on the checkbox group validation feature?

If there are radiobuttons to be validated (data-validation="required") and their name contains square brackets (like "user[salutation]") the form isn't validated at all.

To reproduce: In example.html (lines 135-137) change: name="s1" to: name="foo[s1]".

Problem seems to be on line 229 in jquery.formvalidator.js - for me this worked (added quotes):

$form.find('input[name="' + radioButtonName + '"]').each(function() {

Hi, me again. :)

Again, not an issue, more of an enquiry. Firstly, I have different forms on one page. This is nothing new. The problem comes in that I do not actually use form submissions (my pages never refresh or redirect). I submit form info via AJAX. So in most cases where I have one form on a page, my jQuery would look something like this:

$(document).ready(function()
{
$.validate({
onSuccess : function()
{
someFunction();
return false;
}
});
});

So on successful validation of a form someFunction() gets called, which submits the info via jQuery AJAX. My problem is that I now have two forms on the same page that must call two different fuctions. Each form has its own unique ID. Is there a way that I can discern which form has just been successfully validated in the onSuccess portion so that I can run the relevant function call? I tried console.info(this) inside the onSuccess part, but the information that I get does not discern which form was just validated.

I initially tried onsubmit="someFunction();" on the form, but when I do that, someFunction() gets called even when the form does not validate successfully, which is why I'm using onSuccess.

I try to improve jQuery-Form-Validator until it can allow user to set the range of numbers from input type text data-validation="number".

Adding new format range[beginning_number;end_number] in data-validation-allowing="condition"

I modify the function that validate numbers become:
$.formUtils.addValidator({
name : 'number',
validatorFunction : function(val, $el, config) {
/* ............*/

            if (allowing.indexOf('range') > -1)
            {
                var begin = parseFloat(allowing.substring(allowing.indexOf("[")+1, allowing.indexOf(";")));
                var end = parseFloat(allowing.substring(allowing.indexOf(";")+1,allowing.indexOf("]")));    
            }

            if(allowing.indexOf('number') > -1 && val.replace(/[0-9]/g, '') === '' && val >= begin && val <= end ) {
                return true;
            }
            if(allowing.indexOf('float') > -1 && val.match(new RegExp('^([0-9]+)\\'+decimalSeparator+'([0-9]+)$')) !== null && val >= begin && val <= end ) {
                return true;
            }
        }
       /* ................... */
});

The range of numbers can be integer or float..

Hope that I can contribute this form-validator.

Thank you.

In the "doValidate" function you bind an anonymous function to the "keyup" event, later you unbind every previous function bind to "keyup".

Suggestion: bind a specific function that you can unbind.

Example:
var eventCallValidation = function(event,language,settings){ //<-- specific function
$(this).doValidate(language, settings, false);
}
if(validation === true) {
$element.unbind('keyup',eventCallValidation); //<-- specific unbind
}

if(attachKeyupEvent) {
$element.bind('keyup',[language,settings] , eventCallValidation); //<-- specific bind
}

Consider adding an event that fires every time some kind of validation takes place (onblur, onkeyup etc.) and pass the validated element in question.

Can you add validation of inout:file, file size, type??

a $(document).bind("ready",countCharacters); would help...

Hello,

First of all, I would like to congratulate the developers for the amazing work they did! jQuery-Form-Validator really makes client validation a lot easier.

While studying the README.md, I noticed a small typo in the example about Localization. The real names for the variables related to length validation messages (toLongStart, toLongEnd, toShortStart, toShortEnd) are tooLongStart, tooLongEnd (and so on...).

Format validation shows error when user selects correct data-suggestion.
Example: http://jsfiddle.net/3Tp2A/3/

Should be valid.

I discovered when working with the restrictLength functionality in a text area that I could get the character counter to display a -1 as the count. The function does its job of chopping off the extra characters but it doesn't adjust the count properly and appeared to be a bit buggy. You can test this out by just typing a bunch of characters past the limit and see it go from 0 to -1.

One change I did locally was in the lengthRestriction function, I do not do the numChars count before the trimming of the text to the maxLength. When moved, this allowed for a proper count to make sure only 0 was showed and not any negative values.

Spans keep piling up after blur

Hello,

The float validator has hardcoded the point symbol as decimal separator, but in Germany the decimal separator is the comma symbol. I think that the decimal separator should be possible to be configured by the validationSetup()

Also, the float validator requires to have digits before and after the decimal separator, but in the real life it is not true. This are also valid float numbers - '.01' and '10.'

And a side note - from the documentation it is not clear that default number validator checks only for integer numbers.

BR

some fields such as tooShortStart not localized

Hi!!

Would be great to have the possibility to remove or refresh in real time the validator. In this way will be possible add new form fields in real time and the validator could reload the dom structure.

Thanks,
Roberto.

When a form has been validated including a select element that has failed validation previously, which now has "error" class applied to it, upon the next call to validate the form, if the select value is now valid the "error" class is not removed.

In jquery.formvalidator.js line 292:
$(this).find('input,textarea')

changing to this fixes it:
$(this).find('input,select,textarea')

Using validator server (module security) in cobination with other validator (e.g. requiered) is not working correctly.
Key up events are bound incorrectly rendering multiple ajax requests and triggers blur on input.

Top domain .eu missing fr both email and URL validation.
E.e.g http://europa.eu/

1. The state of Arizona is missing
2. The state of Maryland is missing the 'd' at the end of the state name
3. Washington, D.C. is considered, for address purposes, 'District of Columbia'

Item #3 is optional depending on if you want the list to be used for address verification or a pedantic list of states only. For address verification it should be included. For a pedantic list of states only it should be excluded.

Thank you for your nice module, it's very clean.

was looking for a proper form validator, however this I saw in the code;

• domain check does not validate https urls
• domain check does not validate .co.uk

just some things you might want to improve, keep up the good work

This is not really an issue, but I cannot seem to find an easy way to do this. I am using a form in a modal for record add/edits. If the content of the form gets populated dynamically by means of a record edit, the error messages from the previous validation still shows. I would like to clear all validation messages through jQuery. How do I do this?

I'm going to need the error messages to display in a "helping" sidebar, for a certain form, so I would like the option to do something like:

...
errorMessagePosition : '#sidebar' //or any other id ideally
...

and send the div into this specific place. I will try to implement this, however I am a novice programmer and might get something wrong. So I decided to post it as an improvement suggestion, while I try to get it to work.

Hi,

I have a form with 3 inputs and one text area. Two inputs and the text area are required and all of them have default values that disappear when the user focus on the input/text area.

The thing is that if the user clicks the submit button without focusing on any input the validation doesn't fails.

Is it possible to add those default values to exclude them from being accepted by the validation function? Another possibility is to check on submit if the inputs values are the default ones and manually call the validation function and set that the form has errors in order to show the warnings, would that be possible?.

Otherwise this is a great and extremely useful plugin, great work!!.

Cheers
Rodrigo.

First I would like to thank you for putting in work and making life much easier for the rest of us. I am very very new to jquery so please excuse me if I am making some novice mistake. I have few questions for you..

1. In my inputs can I use multiple validators? For example, could I do something like

input id="email" name="email" type="email" autocomplete="on" placeholder="[email protected]" data-validation="validate_email" data-validation="required"/>

2. Also, it seems that "required" validation is not working in google chrome (I can give you more browser related info if you need it.) I created a form in a modal, well actually it's a login box, although I have made the "email" and "password" fields required I can leave them blank and still click submit without the validator throwing an error. Is this something unique to my situation? Perhaps because I am using a popup modal? Your response will be greatly appreciated. Thank you for the awesome work that you have done.

I tried a little form formatted with a table, but then the validation deoest show up.
Code: https://gist.github.com/anonymous/7667248

[email protected] should be considered a valid e-mail

Few TLD are missing.
You have a constantly updated official version at
http://data.iana.org/TLD/tlds-alpha-by-domain.txt

FYI, don't know if this can help, an 'extended' list maintained by mozilla
http://publicsuffix.org
http://mxr.mozilla.org/mozilla-central/source/netwerk/dns/effective_tld_names.dat?raw=1

Thanks,

(If I may give a suggestion, users can the file from cdnjs.cloudflare.com (like for location.js file)
or locally, up to them to update it each time (manually or by Cron) the iana txt is updated)

//the code
$.fn.validateInputOnBlur = function(language, config, attachKeyupEvent) {
if(attachKeyupEvent === undefined) {
attachKeyupEvent = true;
}
//here ,the code will overwrite language configure
//language = $.extend(language || {}, $.formUtils.LANG);
//correct it
language = $.extend( $.formUtils.LANG,language || {});
.....

data-validation-current-error="Please enter a valid Zipcode"

I have above as attr on input but i get default instead "You gave an incorrect answer"

If the user tries to fill out the form, the form won't scroll back to the errors. I have to disable scrollToTopOnError and write my own scroller in the onError callback.

It would be nice if there was some way to trigger validation without submitting the form, like $('#myform').isValid()

Hello im trying to add a loading screen when the validation is success using jQuery BlockUI Plugin, but had no luck with it, can this feature be added i have tried

onSuccess : function() {
  //alert('The form is valid!');
   // Will stop the submission of the form
    $.blockUI({ 
                    message: $('#form_Wrapper'),
                    overlayCSS: { backgroundColor: '#656586' },
                    css: {
                        '-webkit-border-radius': '10px',
                        '-moz-border-radius':    '10px',
                        border: '5px solid #fff',
                        backgroundColor : '#392F69',
                        color: '#D85F0E'
                        }

});
return false;

},

It works but doing 2 clicks on the submit button after the second click it loads my waiting msg with a gif loading animation but when i try to remove the return false it just submits the form and does not display the loading msg for users to wait while the form is been submitted to a database.

Is it possible to validate the number of selected options in <select> tag when set to accept multiple options?

As far as I know all validations modules works onblurr. So each time the input is unfocused validation process run.
In the case of 'country' of location.js, it doesn´t work. This field will be validated after submit the form.
Maybe, any feature or flag has to be activated in order to enable it. Maybe it is a bug.

If it is not the way to claim fo solution, please write which is.

Best regards,

Hello,

First of all, thank you very much for this awesome plugin, it has helped me a lot as I had a project with a lot of forms.

I needed a way to have this plugin check radios as well, as I had a lot as well.

(function($) {
    $.formUtils.addValidator({
        name: 'radio',
        validatorFunction: function(value, $el, config, language, $form) {
            var attr_name = $el.attr('name');

            if($('input[name='+ attr_name +']').is(':checked')) {
                $el.closest('.btn-group').css('border', '1px solid #356635');
                return true;
            }
            else {
                $el.closest('.btn-group').css('border', '1px solid #c22e13');
                return false;
            }
        },
        errorMessage: "Please select a valid option.",
        errorMessageKey: "badRadioButton"
    });
})(jQuery);

With Twitter Bootstrap's code as an example:

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="radio" name="answer" value="yes" data-validation="radio"> YES
    </label>

    <label class="btn btn-default">
        <input type="radio" name="answer" value="no"> NO
    </label>
</div>

You can, of course close this issue. I just wanted a place to put this code so other people needing it could easily find it. And the issues list (where I initially searched for if someone had already done it) is the perfect place.

Regards.