whatgoodisaroad / validity Goto Github PK

Hi,

When I have a validity on a form with the standard binding that it fires on the submit() of the form. I cannot find an option to prevent it from triggering this twice or thrice etc..

Is this build in yet, or should this be added?

This is especially important on slower internet connections or when the saving takes longer than usual. If the user presses submit again it will cancel the previous request and increases the time for the user even longer.

$.extend($.validity.messages, {
require:"#{field} requerido.",
// Format validators:
match:"#{field} está en un formato no válido.",
integer:"#{field} debe ser un número entero positivo.",
date:"#{field} debe ser una fecha.",
email:"#{field} debe ser una dirección de email.",
usd:"#{field} debe ser uan cantidad en dólares USA.",
url:"#{field} debe ser una dirección URL.",
number:"#{field} debe ser un nombre.",
zip:"#{field} debe ser un código postal ##### o #####-####.",
phone:"#{field} debe ser un número de teléfono ###-###-####.",
guid:"#{field} debe ser un GUID del tipo {3F2504E0-4F89-11D3-9A0C-0305E82C3301}.",
time24:"#{field} debe ser una hora en formato de 24 horas (ej.: 23:00).",
time12:"#{field} debe ser una hora en formato de 12 horas (ej.:12:00 AM/PM)",

// Value range messages:
lessThan:"#{field} debe ser inferior a #{max}.",
lessThanOrEqualTo:"#{field} debe ser inferior o igual a #{max}.",
greaterThan:"#{field} debe ser superior a #{min}.",
greaterThanOrEqualTo:"#{field} debe ser superior o igual a #{min}.",
range:"#{field} debe estar comprendido entre #{min} y #{max}.",

// Value length messages:
tooLong:"#{field} no debe superar los #{max} caracteres.",
tooShort:"#{field} debe contener como mínimo #{min} caracteres.",

// Composition validators:
nonHtml:"#{field} no debe contener caracteres HTML.",
alphabet:"#{field} contiene caracteres prohibidos.",

minCharClass:"#{field} no debe contener más de #{min} caracteres {#}charclass.",
maxCharClass:"#{field} no debe contener menos de #{min} caracteres #{charClass}.",

// Aggregate validator messages:
equal:"Los valores no coinciden.",
distinct:"Un valor se repite.",
sum:"La suma de los valores difiere de #{sum}.",
sumMax:"La suma de los valores debe ser inferior a #{max}.",
sumMin:"La suma de los valores debe ser superior a #{min}.",

// Radio validator messages:
radioChecked:"El valor seleccionado no es válido.",

generic:"No válido."

});

$.validity.setup({ defaultFieldName:"Este campo", });

Sometimes I have forms with fields that are optional, but if data is entered into them, then they must be validated against that data.
E.g.:
$('#company')
.minLength(2)
.nonHtml();

Currently the above validation causes an error message hint to be displayed when no data is entered into the field.
Is there a solution for this? Thanks

Edit: it's the minLength() check triggering the 'problem'.
I think require() should be the only method causing a field to be required, but if you think otherwise then perhaps it's an idea to add a minLengthOrEmpty() method, etc.

If we have:
<input id="mail" type="text" name="mail" value="" />
then
jQuery('#mail').match('email', 'error in mail')
works good.
But if type of input field is email (HTML 5):
<input id="mail" type="email" name="mail" value="" />
validation don't work.

The range validation demo on the home page( http://validity.thatscaptaintoyou.com/) not working in Internet Explorer (tested in IE9)

For "Number of Vehicles" validation message "Vehicle count must be between 4 and 12." is displayed even if a valid value (say 5) is entered.

These 2 are removed and used in validity
jQuery.trim
jQuery.isFunction

I fork'd the project to allow a user to specify a custom CSS class:

$.validity.setup({
     tooltipCustomClass: 'my-tooltip-class'
});

So far I have been able to change the background color:

.my-tooltip-class {
    background-color: red !important;
}

.my-tooltip-class .validity-tooltip-outer, .my-tooltip-class .validity-tooltip-inner {
    border-right-color: red !important;
}

.my-tooltip-class .validity-tooltip-outer {
    border-right-color: red !important;
}

.my-tooltip-class .validity-tooltip-inner {
    border-right-color: red !important;
}

but I haven't figured out how to re-align the arrow to not be in the middle of the input field but instead line-up with the field's bottom.

Any insight would be greatly appreciated,

Mike Norman

E.g. in the example file there it checks if the required field is set.

Taking this example file, how would the require for :requiredInput2 be added to the list of validations when validity is already configured. Would it be possible to add an 'add' command to allow adding of extra validations?

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset=utf-8>
        <title>A simple HTML5 page layout</title>
        <link rel="stylesheet" href="jquery.validity.css" />
    </head>
    <body>
        <form action="">
            <frameset>
                <legend>The form</legend>

                <label for="requiredInput">This input is required.</label>
                <input type="text" id="requiredInput" />

                <input type="text" id="requiredInput2" />

                <input type="submit" />
            </frameset>
        </form>

        <script src="jquery-1.10.2.min.js"></script>
        <script src="jquery.validity.js"></script>
        <script>
            $("form").validity(function() {
                $("#requiredInput").require();
            });

            $("#requiredInput2").require();
        </script>
    </body>   
</html>

Initially none of the radio buttons in a from are selected. Though we can pre-select a default radio button, this helps in forcing user to consciously select proper option.

Now how do i check if one of the radio buttons is selected, through validity methods ? If not possible, then i can use jQuery("input:radio").is(":checked"). In that case, I do not know to stop the form from getting submitted.

I have setup the scrollTo setting as below but is not working
$.validity.setup({
// The this property is set to true, validity will scroll the browser viewport
// so that the first error is visible when validation fails.
scrollTo: true
});

$("#post-property-form").validity(function() {
    $("#post-details-input-property-title")
    .require(languageString['errorPropertyTitle']);//is required

});

Is this correct? if not, what is the correct way to setup scrollTo?

Thanks.

$.extend($.validity.messages, {
require:"#{field} ist obligatorisch.",

// Format validators:
match:"#{field} ist in einem ungültigen Format.",
integer:"#{field} muss eine positive, ganze Zahl sein.",
date:"#{field} muss als Datum formatiert werden. (mm/dd/yyyy)",
email:"#{field} muss als Email formatiert werden.",
usd:"#{field} muss als US Dollar Betrag formatiert werden.",
url:"#{field} muss als URL formatiert werden.",
number:"#{field} muss als Nummer formatiert werden.",
zip:"#{field} muss als Postleitzahl formatiert werden ##### oder #####-####.",
phone:"#{field} muss als Telefonnummer formatiert werden ###-###-####.",
guid:"#{field} muss als Guid Zufallszahl formatiert werden {3F2504E0-4F89-11D3-9A0C-0305E82C3301}.",
time24:"#{field} muss als 24 Stunden Zeit formatiert werden: 23:00.",
time12:"#{field} muss als 12 Stunden Zeit formatiert werden: 12:00 AM/PM",

// Value range messages:
lessThan:"#{field} muss weniger sein als #{max}.",
lessThanOrEqualTo:"#{field} muss weniger sein als oder gleich an #{max}.",
greaterThan:"#{field} muss größer sein dan #{min}.",
greaterThanOrEqualTo:"#{field} muss größer sein dan oder gleich an #{min}.",
range:"#{field} muss sein zwischen #{min} und #{max}.",

// Value length messages:
tooLong:"#{field} darf nicht länger sein als #{max} Zeichen.",
tooShort:"#{field} darf nicht kürzer sein als #{min} Zeichen.",

// Composition validators:
nonHtml:"#{field} darf nicht HTML Zeichen enthalten.",
alphabet:"#{field} enthalt nicht zulässige Zeichen.",

minCharClass:"#{field} darf nicht mehr enthalten als #{min} #{charClass} Zeichen.",
maxCharClass:"#{field} darf nicht weniger enthalten als #{min} #{charClass} Zeichen.",

// Aggregate validator messages:
equal:"Werte stimmen nicht überein.",
distinct:"Ein Wert wurde wiederholt.",
sum:" Werte können nicht hinzugefügt werden #{sum}.",
sumMax:"Die Summe der Werte muss weniger sein als #{max}.",
sumMin:"Die Summe der Werte muss mehr sein als #{min}.",

// Radio validator messages:
radioChecked:"Der ausgewählte Wert ist nicht gültig.",

generic:"Ungültig."

});

$.validity.setup({ defaultFieldName:"Dieses Feld", });

You can instead do something like minlength(1) but I see no reason why require shouldn't work for textarea as well as inputs.

In the aggregate validator sumMin() implemented using 'less than' operator (<) where as it must be 'grater than' (>) operator. Therefore sumMin behave same as sumMax(). This defect was seen in Validity Version 1.2.0

Current Implementation

            if ($reduction.length && min < numericSum($reduction)) {
                raiseAggregateError(
                    $reduction,
                    msg || format(
                        $.validity.messages.sumMin,
                        { min:min }
                    )
                );

Corrected Implementation

            if ($reduction.length && min > numericSum($reduction)) {
                raiseAggregateError(
                    $reduction,
                    msg || format(
                        $.validity.messages.sumMin,
                        { min:min }
                    )
                );

In my JQuery Mobile app, the default label error goes off the screen to the right because there isn't enough room.

How can I style the label error to appear below the form item instead of to the right?

Hi,

I'm using a custom output mode, which highlights form fields with a red border and additionally shows a summary-box above the form with all the error messages in there.

I'm also using Validity with AJAX only. The basic principle is: on form submit validate, if validation fails validate again on every form element change event:

if (validate()) {
// do the Ajax call to the next page
}
else {
$("#form").find('input,select').change(validate);
}

The validate() function triggers $.validity.start(); a couple of validations and $.validity.end(); and returns result.valid.

So far this works flawless when manually filling out the form. On one page I'm using an address suggestions framework, where you have one input field. You start typing your address and when you select an option form a suggestion list, it'll fill all the form elements with the corresponding values (zip code, city, state, ...).

For each form element, where I set the value, I also trigger the change event to trigger the re-validation, which it does. The error messages in the summary box are updated (they disappear one by one).

I've debugged a bit and the last two validations actually return $.validity.end().errors = 0 (so no errors), but I still get an empty summary container displayed (my custom output mode works the same way as the standard summary output mode - especially the end function, so this should happen with the default output mode "summary" as well).

It seems to only happen, when the form is filled by a script instead of a physical user. I was trying to debug and find out why, but somehow I got nowhere. The result is always valid for my last two validations with 0 errors, but it still shows me the summary box.

$.extend($.validity.messages, {
require:"#{field} is vereist.",

// Format validators:
match:"#{field} is in een ongeldig formaat.",
integer:"#{field} moet een positief, heel getal zijn.",
date:"#{field}moet zijn opgesteld als een datum. (mm/dd/yyyy)",
email:"#{field} moet zijn opgesteld als een email.",
usd:"#{field} moet zijn opgesteld als een US Dollar bedrag.",
url:"#{field} moet zijn opgesteld als een URL.",
number:"#{field} moet zijn opgesteld als een nummer.",
zip:"#{field} moet zijn opgesteld als een postcode ##### of #####-####.",
phone:"#{field} moet zijn opgesteld als een telefoonnummer ###-###-####.",
guid:"#{field} moet zijn opgesteld als een willekeurig getal zoals {3F2504E0-4F89-11D3-9A0C-0305E82C3301}.",
time24:"#{field} moet zijn opgesteld als een 24 uurs tijd: 23:00.",
time12:"#{field} moet zijn opgesteld als een 12 uurs tijd: 12:00 AM/PM",

// Value range messages:
lessThan:"#{field} moet minder zijn dan #{max}.",
lessThanOrEqualTo:"#{field} moet minder zijn dan of gelijk aan #{max}.",
greaterThan:"#{field} moet groter zijn dan #{min}.",
greaterThanOrEqualTo:"#{field} moet groter zijn dan of gelijk zijn aan #{min}.",
range:"#{field} moet zijn tussen #{min} en #{max}.",

// Value length messages:
tooLong:"#{field} mag niet langer zijn dan #{max} karakters.",
tooShort:"#{field} mag niet korter zijn dan #{min} karakters.",

// Composition validators:
nonHtml:"#{field} mag niet HTML karakters bevatten.",
alphabet:"#{field} bevat niet toegestane karakters.",

minCharClass:"#{field} mag niet meer bevatten dan #{min} #{charClass} karakters.",
maxCharClass:"#{field} mag niet minder bevatten dan #{min} #{charClass} karakters.",

// Aggregate validator messages:
equal:"Waarden komen niet overeen.",
distinct:"Een waarde is herhaald.",
sum:"Waarden sluiten niet aan op #{sum}.",
sumMax:"De som van de waarden moeten minder zijn dan #{max}.",
sumMin:"De som van de waarden moeten groter zijn dan #{min}.",

// Radio validator messages:
radioChecked:"De geselecteerde waarde is niet geldig.",

generic:"Ongeldig."

});

$.validity.setup({ defaultFieldName:"Dit veld", });

Hello,

I downloaded your code and attempted to use. Using dreamweaver and just running the file in a browser, not running from web server. I cannot get it to work. I would appreciated some assistance. Code is listed below

Thank you

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link type="text/css" rel="Stylesheet" href="Assets/css/jquery.validity.css" />

<script type="text/javascript" src="Assets/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="Assets/js/jquery.validity.js"></script>

<script type="text/javascript">
    // Select all of the forms on the page (in this case the only one)
    // and call 'validity' on the result.
   $("form").validity(function() {
    $("#vehicles")                      // The first input:    
        .require()                          // Required:
        .match("number")                    // In the format of a number:
        .range(4, 12);                      // Between 4 and 12 (inclusively):

    $("#dob")                           // The second input:
        .require()                          // Required:
        .match("date")                      // In the format of a date:
        .lessThanOrEqualTo(new Date());     // In the past (less than or equal to today):
    });
   });
</script>


</head>

<body>
        <form method="get" action="validate.html">
            Number of Vehicles:
            <input type="text" id="vehicles" name="vehicles" title="Vehicle Count" />
            <br /><br />
            Date of birth:
            <input type="text" id="dob" name="dob" title="Birthday" />
            <br /><br />
            <input type="submit" />
        </form>
    </body>
</html>

Edited for formatting.

Hi,

This is probably not an issue, but I wish for a clarification/example in the Documentation.

I got a simple form, but that also requires that there is at least one checkbox choosen to pass the test.

  <input type="checkbox" id="cb1" name="myVar[]" value="A">
  <input type="checkbox" id="cb2" name="myVar[]" value="B">

I can make my own javascript, but then again. I am using the Validity on my entire form, and still wants to be able to use the error-handling and so within Validity.

Is there a way to see if any of the cb1, cb2 is checked - and IF NOT show an error, I am only using the require()-method on the different field types.

I tried using the same id on both input-types, but that is not working, as well as there of course should be no duplicate id's of course.

I have read the documentation, but I am not finding an answer. Perhaps .assert()-function? But still seems to be wrong solution to have such an advanced method to make this.

/ Martin

I am using validity for a non-form and ran into this issue when trying to use assert. Here is a snippit of the code I'm trying to use (I know there's a greaterThan operator, but I need to do some custom formatting first):

$.validity.start();
$priceField.assert(priceGreaterCheck, "Price must be greater than 0");
var result = $.validity.end();

function priceGreaterCheck(element)
{
var rv = $priceField.asNumber() > 0;
return rv;
};

The assert call raises the error the first time I try to validate the field. However, if I try to validate the field again, the assert statement returns true even if I don't change the value. The reason I think this is happening is because after the first run through, the validate method is doing

$obj.reduction = $(elements);

which is returning a list of passed elements. However, if nothing passes, then $obj.reduction = [](but not undefined). Therefore in the assert method the line:

var $reduction = this.reduction || this;

is returning [] instead of the object contained in this. This causes

if ($reduction.length)

to evaluate to false and not try the validation which is not the desired behavior. I don't want to modify the validity file so as a workaround I'm doing:

$priceField.reduction = undefined;
$priceField.assert(priceGreaterCheck, "Price must be greater than 0");

to force this.reduction || this to always evaluate to this. This is obviously not a permanent solution and should be handled somewhere inside of validity.

I have a range validation as below and it triggers validation even if user does not enter any value.

 $('input[data-name="AMOUNTDUE"]').range(0.01, 99999999.99);

My requirement is to validate only if a value is entered by the user.
I searched in the Validity documentation to find a way to mark an input field as optional and validate only if a value is entered.

Is there is a way in Validity to full-fill this requirement?

I came up with a way to resolve this by implementing optional() validator as below.

$.fn.extend({
optional: function() {
    var $obj = this;
    var $reduction = ($obj.reduction || $obj).filter($.validity.settings.elementSupport);
    // Array to store only elements that pass the regimen.
    var elements = [];
    // For each in the reduction.
    $reduction.each(
        function() {
            // If the element has a value, include it in the reduction.
            var val = $(this).val();
            if (val.length > 0) {
                elements.push(this);
            }
        }
    );
    // Attach a (potentially) reduced set of only elements that passed.
    $obj.reduction = $(elements);
    // Return the full set with attached reduction.
    return $obj;
    }
});

Then we can call like

$('input[data-name="AMOUNTDUE"]').optional().range(0.01, 99999999.99);

Please let me know your comments on the above.

Breaking change in jquery 3

http://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/
"So, instead, we’re experimentally defying the evolution of these methods and reverting to a simple, primordial model. This will break some code. If you have elements in a stylesheet that are set to display: none, the .show() method will no longer override that. So the most important rule for moving to jQuery 3.0 is this: Don’t use a stylesheet to set the default of display: none and then try to use .show() – or any method that shows elements, such as .slideDown() and .fadeIn() – to make it visible.

If you need an element to be hidden by default, the best way is to add a class name like “hidden” to the element and define that class to be display: none in a stylesheet. Then you can add or remove that class using jQuery’s .addClass() and .removeClass() methods to control visibility. Alternately, you can have a .ready() handler call .hide() on the elements before they are displayed on the page. Or, if you really must retain the stylesheet default, you can use .css("display", "block") (or the appropriate display value) to override the stylesheet."

Hi, just wanted to a) show appreciation for this great plugin and
b) say that there was an issue in that when the error output was in modal form
the plugin wouldn't jump to the first error msg even with scrollto enabled.

In researching the problem I came across this solution:
https://code.google.com/p/validity/issues/detail?id=43

Which seems to work.

Hi,

I'm using Select2 for some inputs, it hides the original input/select field which means that messages popup in the top left of the page and not over the select2 widget.

Is it possible to provide a selector for the placement of the message during validation?

Congrats for the plugin.
Can you explain me how to validate a checkbox or a select field?
I want to make it required, and if it isn't checked (the checkbox) or any option in the select field selected, it would appear an error message, like it happens with input form fields.
Thanks

Greetings,

I have put the form in a page that it's loaded thru jquery into a div.

I'm, using history.js.

The problem is that because the form is in a div in an eternal page that is loaded to the page the submit button stops working and it loads the page again.

How can I call validity from the page that is loading the div with the form?

Thanks,
Maurício

Greetings,

• when validating a checkbox it doesn't apply the ".validity-erroneous" style if the checkbox isn't checked, how can I do this?
• how can I validate (with .validity-erroneous also) a select field?

Thanks in advance

Basically something like:

{
"name" : "validity",
"version" : "1.4.6",
"author" : "whatgoodisaroad",
"description" : "Custom Client-Side Validation with jQuery",
"homepage" : "https://github.com/whatgoodisaroad/validity",
"license" : "Public Domain",
"keywords" : ["validity", "client", "jquery"],
"repository" : {
"type": "git",
"url": "git://github.com/whatgoodisaroad/validity.git"
},
"main" : "./build/jquery.validity.js",
"files" : ["build/*", "README.md"]
}

Hi,
Could you please consider adding this to Bower and including a bower.json and a package.json, etc?

Thanks!

I have a FancyBox overlay for my form and validation works perfect, Except if you close the overlay with the x button, the flags on validation errors remain on the page. the close function is built into the overlay library. How can you remove the errors?

Thanks

I came with a problem when using validity in Safari.
I found the reason was that 'Date' parsing in Chrome and Safari are different.

Hi,

That function doesn't work. So untill it fixed I can't use the plugin.
It's shame since it's a great validation plugin.

Thanks, Dmitry

The download package is missing arrow.gif which is referred by the CSS.

Hi,

I want to disable Validation and want to close the error popup from java Script method.

Is it possible with this version ?

Hi, I've been experimenting with the plugin for about half a day to make the selection of
a radio button group required...and no luck.

So far I have this:

$( 'input:radio[name=gender]' )
.assert( $("input:radio[name='gender']").is(":checked"), 'Please select your gender' );

But no error message comes up for the radio group.
Please help as I'm utterly lost as to what I did wrong...

https://jsfiddle.net/cmanley/kbpckqcn/

Is not yet in the messages array.

I couldn't find how to do that in the documentation.
Is it possible?

Also a nice to have feature would be to close/fade-out all error messages after a timeout.

Is there any way to add classes to the invalid inputs through configuration?

hi,

i don't have an any idea to validate an checkbox. can someone help me?
Thanks!!

Ooops, seems like google repo is no longer used. Moving issue #61 here.

How to replicate issue

• Set up a table with a number of input fields in various columns, like http://pastie.org/2754304 or see attached table.html
• Run validation with:
  
$.validity.setup({ outputMode:"label" });
$.validity.start();
$('#group_table input:not([id_=member_Bounced]').require();
$('#group_table input:not([id_=member_Bounced]').match("email");
$('#group_table input:not([id*=member_Bounced]').distinct("Members must be unique.");
result = $.validity.end();

• What is the expected output? What do you see instead?
  Colliding fields are ones with input of [email protected], however field with [email protected] is chosen as conflicting one (see output here and here). Could it be that id of input fields containing wonky brackets causes confusion?
• SW versions: Validity 1.2.0 with Jquery 1.6.4

Thank you for your help!

--p

PS

Thanks for this fantastic tool!

I have a SlickGrid (with checkbox selection, as seen at
http://mleibman.github.com/SlickGrid/examples/example-checkbox-row-select.html).

I'm using the 'assert' method to check if I have at least one row selected:

var minSelected = ($(".slick-cell-checkboxsel input[type='checkbox']:checked").length >= 1);
$(".slick-cell-checkboxsel input[type='checkbox']").assert(minSelected, "You must select at least 1 tactic");

Since there's no ID's to the checkboxes it can't select an item to attach the label to.

Is it possible to make it so that you can customize the label so it show at a defined element?

Hi Wyatt,

The http://validity.thatscaptaintoyou.com/ site doesn't work anymore.

Is there any chance that you can migrate the documentation to the github wiki or make a github.io site for this repo?

Regards

Mark

Hello and thank you for this library.
My question: how can I change the validation rules on the fly, for example setting and removing "require()" as a validation rule ?
Tnx
Roberto

Hi:

I use Symfony and number fields are rendered as <input type="number" ...>
The library does not work in these cases.

I gues the library does not support HTML5.