Skip to content

Commit

Permalink
Merge pull request guillaumepotier#33 from guillaumepotier/html5-vali…
Browse files Browse the repository at this point in the history 
…dators

Support some html5 types
  • Loading branch information
@guillaumepotier
guillaumepotier committed Jan 22, 2013
2 parents aafe7bb + d3f4eb9 commit 5726291
Show file tree
Hide file tree
Showing 13 changed files with 161 additions and 53 deletions.
39 changes: 20 additions & 19 deletions dist/parsley-standalone.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/parsley.extend.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

39 changes: 20 additions & 19 deletions dist/parsley.min.js
View file

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions documentation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -504,6 +504,7 @@ <h4>Basic constraints</h4>
<td>Min</td>
<td>
<code>data-min="6"</code>
<code>type="number" min="6"</code>
</td>
<td>Validates that a given number is greater than some minimum number.</td>
<td class="not-for-mobile">
Expand All @@ -529,6 +530,7 @@ <h4>Basic constraints</h4>
<td>Max</td>
<td>
<code>data-max="100"</code>
<code>type="number" max="100"</code>
</td>
<td>Validates that a given number is less than some maximum number.</td>
<td class="not-for-mobile">
Expand All @@ -554,6 +556,7 @@ <h4>Basic constraints</h4>
<td>Range</td>
<td>
<code>data-range="[6, 100]"</code>
<code>type="range" min="6" max="100"</code>
</td>
<td>Validates that a given number is between some minimum and maximum number.</td>
<td class="not-for-mobile">
Expand Down Expand Up @@ -736,6 +739,7 @@ <h4>Type constraints</h4>
<td>Email</td>
<td>
<code>data-type="email"</code>
<code>type="email"</code>
</td>
<td>Validates that a value is a valid email address.</td>
<td class="not-for-mobile">
Expand All @@ -761,6 +765,7 @@ <h4>Type constraints</h4>
<td>Url</td>
<td>
<code>data-type="url"</code>
<code>type="url"</code>
</td>
<td>Validates that a value is a valid url.</td>
<td class="not-for-mobile">
Expand Down Expand Up @@ -836,6 +841,7 @@ <h4>Type constraints</h4>
<td>Number</td>
<td>
<code>data-type="number"</code>
<code>type="number"</code>
</td>
<td>Validates that a value is a valid number.</td>
<td class="not-for-mobile">
Expand Down
3 changes: 3 additions & 0 deletions i18n/messages.de.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ window.ParsleyConfig = window.ParsleyConfig || {};
(function ($) {
window.ParsleyConfig = $.extend( true, {}, window.ParsleyConfig, {
messages: {
// parsley //////////////////////////////////////
defaultMessage: "Die Eingabe scheint nicht korrekt zu sein."
, type: {
email: "Die Eingabe muss eine gültige E-Mail-Adresse sein."
Expand All @@ -24,6 +25,8 @@ window.ParsleyConfig = window.ParsleyConfig || {};
, maxlength: "Die Eingabe ist zu lang. Es dürfen höchstens %s Zeichen eingegeben werden."
, rangelength: "Die Länge der Eingabe ist ungültig. Es müssen zwischen %s und %s Zeichen eingegeben werden."
, equalto: "Die Eingabe darf nicht identisch sein."

// parsley.extend ///////////////////////////////
}
});
}(window.jQuery || window.Zepto));
14 changes: 11 additions & 3 deletions i18n/messages.fr.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ window.ParsleyConfig = window.ParsleyConfig || {};
(function ($) {
window.ParsleyConfig = $.extend( true, {}, window.ParsleyConfig, {
messages: {
defaultMessage: "Cette valeur semble non valide."
// parsley //////////////////////////////////////
defaultMessage: "Cette valeur semble invalide."
, type: {
email: "Cette valeur n'est pas une adresse email valide."
, url: "Cette valeur n'est pas une URL valide."
Expand All @@ -13,8 +14,8 @@ window.ParsleyConfig = window.ParsleyConfig || {};
, dateIso: "Cette valeur n'est pas une date valide (YYYY-MM-DD)."
, alphanum: "Cette valeur doit être alphanumérique."
}
, notnull: "Cette valeur ne peux pas être nulle."
, notblank: "Cette valeur ne peux pas être vide."
, notnull: "Cette valeur ne peut pas être nulle."
, notblank: "Cette valeur ne peut pas être vide."
, required: "Ce champ est requis."
, regexp: "Cette valeur semble non valide."
, min: "Cette valeur ne doit pas être inféreure à %s."
Expand All @@ -24,6 +25,13 @@ window.ParsleyConfig = window.ParsleyConfig || {};
, maxlength: "Cette chaîne est trop longue. Elle doit avoir au maximum %s caractères."
, rangelength: "Cette valeur doit contenir entre %s et %s caractères."
, equalto: "Cette valeur devrait être identique."

// parsley.extend ///////////////////////////////
, minwords: "Cette valeur doit contenir plus de %s mots."
, maxwords: "Cette valeur ne peut pas dépasser %s mots."
, rangewords: "Cette valeur doit comprendre %s à %s mots."
, greaterthan: "Cette valeur doit être plus grande que %s."
, lessthan: "Cette valeur doit être plus petite que %s."
}
});
}(window.jQuery || window.Zepto));
3 changes: 3 additions & 0 deletions i18n/messages.is.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ window.ParsleyConfig = window.ParsleyConfig || {};
(function ($) {
window.ParsleyConfig = $.extend( true, {}, window.ParsleyConfig, {
messages: {
// parsley //////////////////////////////////////
defaultMessage: "Þetta gildi virðist vera ógilt."
, type: {
email: "Þetta ætti að vera gilt netfang."
Expand All @@ -24,6 +25,8 @@ window.ParsleyConfig = window.ParsleyConfig || {};
, maxlength: "Þetta gildi er of langt. Það ætti að innihalda %s stafi eða færri."
, rangelength: "Þetta gildi er ógilt. Það ætti að vera %s-%s stafir að lengd."
, equalto: "Þetta gildi ætti að vera eins."

// parsley.extend ///////////////////////////////
}
});
}(window.jQuery || window.Zepto));
3 changes: 3 additions & 0 deletions i18n/messages.nl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ window.ParsleyConfig = window.ParsleyConfig || {};
(function ($) {
window.ParsleyConfig = $.extend( true, {}, window.ParsleyConfig, {
messages: {
// parsley //////////////////////////////////////
defaultMessage: "Deze waarde lijkt onjuist."
, type: {
email: "Dit lijkt geen geldig e-mail adres te zijn."
Expand All @@ -24,6 +25,8 @@ window.ParsleyConfig = window.ParsleyConfig || {};
, maxlength: "Deze waarde is te lang. Deze mag maximaal %s karakters lang zijn."
, rangelength: "Deze waarde moet tussen %s en %s karakters lang zijn."
, equalto: "Deze waardes moeten identiek zijn."

// parsley.extend ///////////////////////////////
}
});
}(window.jQuery || window.Zepto));
3 changes: 3 additions & 0 deletions i18n/messages.no.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ window.ParsleyConfig = window.ParsleyConfig || {};
(function ($) {
window.ParsleyConfig = $.extend( true, {}, window.ParsleyConfig, {
messages: {
// parsley //////////////////////////////////////
defaultMessage: "Denne verdien er ikke gyldig."
, type: {
email: "Denne verdien må være en gyldig e-post."
Expand All @@ -24,6 +25,8 @@ window.ParsleyConfig = window.ParsleyConfig || {};
, maxlength: "Denne verdien er for lang. Den må ikke være lenger enn %s tegn."
, rangelength: "Denne verdien har feil lengde. Lengden må være mellom %s og %s tegn."
, equalto: "Denne verdien må være lik."

// parsley.extend ///////////////////////////////
}
});
}(window.jQuery || window.Zepto));
6 changes: 3 additions & 3 deletions parsley.extend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@ window.ParsleyConfig = window.ParsleyConfig || {};
}
}
, messages: {
minwords: "This value should have %s words at least."
, maxwords: "This value should have %s words maximum."
, rangewords: "This value should have between %s and %s words."
minwords: "This value should have %s words at least."
, maxwords: "This value should have %s words maximum."
, rangewords: "This value should have between %s and %s words."
, greaterthan: "This value should be greater than %s."
, lessthan: "This value should be less than %s."
}
Expand Down
55 changes: 47 additions & 8 deletions parsley.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,11 +129,11 @@
}

, min: function ( val, min ) {
return val >= min;
return new Number( val ) >= new Number( min );
}

, max: function ( val, max ) {
return val <= max;
return new Number( val ) <= new Number( max );
}

, range: function ( val, arrayRange ) {
Expand Down Expand Up @@ -234,7 +234,7 @@
return message;
}

return message.replace(new RegExp("%s", "i"), args);
return message.replace(new RegExp( "%s", "i" ), args);
}

/**
Expand Down Expand Up @@ -312,10 +312,7 @@
this.hash = this.generateHash();
this.errorClassHandler = this.options.errors.classHandler( element ) || this.$element;

// a field is required if data-required="true" or class="required" or required="required"
if ( 'undefined' !== typeof this.options[ 'required' ] || this.$element.hasClass( 'required' ) || this.$element.attr( 'required' ) === 'required' ) {
this.isRequired = this.options[ 'required' ] = true;
}
this.bindHtml5Constraints();

// bind validators to field
this.addConstraints();
Expand All @@ -326,6 +323,37 @@
}
}

/**
* Bind some extra html5 types / validators
*
* @method bindHtml5Constraints
*/
, bindHtml5Constraints: function () {
// add html5 required support + class required support
if ( this.$element.hasClass( 'required' ) || this.$element.attr( 'required' ) ) {
this.options.required = true;
}

// add html5 supported types & options
if ( 'undefined' !== typeof this.$element.attr( 'type' ) && new RegExp( this.$element.attr( 'type' ), "i" ).test( "email url number range" ) ) {
this.options.type = this.$element.attr( 'type' );

// number and range types could have min and/or max values
if ( new RegExp( this.options.type, "i" ).test( "number range" ) ) {
this.options.type = "number";

// double condition to support jQuery and Zepto.. :(
if ( 'undefined' !== typeof this.$element.attr( 'min' ) && this.$element.attr( 'min' ).length ) {
this.options.min = this.$element.attr( 'min' );
}

if ( 'undefined' !== typeof this.$element.attr( 'max' ) && this.$element.attr( 'max' ).length ) {
this.options.max = this.$element.attr( 'max' );
}
}
}
}

/**
* Attach field validators functions passed through data-api
*
Expand All @@ -339,6 +367,10 @@
, requirements: this.options[ constraint ]
, isValid: null
} );

if ( constraint === "required" ) {
this.isRequired = true;
}
}
}
}
Expand Down Expand Up @@ -470,6 +502,13 @@
return isValid;
}

/**
* Check if value has changed since previous validation
*
* @method needsValidation
* @param value
* @return {Boolean}
*/
, needsValidation: function ( val ) {
if ( this.val === val && this.validatedOnce ) {
return false;
Expand Down Expand Up @@ -589,7 +628,7 @@
* @method reset
*/
, reset: function () {
this.isValid = true;
this.isValid = null;
this.removeErrors();
this.errorClassHandler.removeClass( this.options.successClass ).removeClass( this.options.errorClass );
}
Expand Down
10 changes: 10 additions & 0 deletions tests/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,17 +62,27 @@
<input type="text" id="required" data-required="true" />
<input type="text" id="required-class" class="required" />
<input type="text" id="required-html5" required="required" />
<input type="text" id="required-html5-bis" required />

<input type="text" id="minlength" data-minlength="6" />
<input type="text" id="maxlength" data-maxlength="6" />
<input type="text" id="rangelength" data-rangelength="[6,10]" />
<input type="text" id="min" data-min="10" />
<input type="text" id="max" data-max="10" />
<input type="number" id="min-html5" min="10" />
<input type="number" id="max-html5" max="10" />

<input type="text" id="range" data-range="[6,10]" />
<input type="text" id="regexp" data-regexp="\d+" />

<input type="text" id="typeemail" data-type="email" />
<input type="email" id="typeemail-html5" />

<input type="range" id="typerange-html5" min="5" max="10" />

<input type="text" id="typeurl" data-type="url" />
<input type="url" id="typeurl-html5" />

<input type="text" id="typeurlstrict" data-type="urlstrict" />
<input type="text" id="typedigits" data-type="digits" />
<input type="text" id="typenumber" data-type="number" />
Expand Down
31 changes: 31 additions & 0 deletions tests/tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,15 @@ var testSuite = function () {
triggerSubmitValidation( '#required-html5', ' foo' );
expect( $( '#required-html5' ).hasClass( 'parsley-success' ) ).to.be( true );
} )
it ( 'required - html5-api bis', function () {
triggerSubmitValidation( '#required-html5-bis', '' );
expect( $( '#required-html5-bis' ).hasClass( 'parsley-error' ) ).to.be( true );
expect( getErrorMessage( '#required-html5-bis', 'required') ).to.be( 'This value is required.' );
triggerSubmitValidation( '#required-html5-bis', ' ' );
expect( $( '#required-html5-bis' ).hasClass( 'parsley-error' ) ).to.be( true );
triggerSubmitValidation( '#required-html5-bis', ' foo' );
expect( $( '#required-html5-bis' ).hasClass( 'parsley-success' ) ).to.be( true );
} )
it ( 'minlength', function () {
triggerSubmitValidation( '#minlength', '12345' );
expect( $( '#minlength' ).hasClass( 'parsley-error' ) ).to.be( true );
Expand Down Expand Up @@ -228,6 +237,14 @@ var testSuite = function () {
triggerSubmitValidation( '#min', '12' );
expect( $( '#min' ).hasClass( 'parsley-success' ) ).to.be( true );
} )
it ( 'min html5', function () {
triggerSubmitValidation( '#min-html5', 12 );
expect( $( '#min-html5' ).hasClass( 'parsley-success' ) ).to.be( true );
} )
it ( 'max html5', function () {
triggerSubmitValidation( '#max-html5', 8 );
expect( $( '#max-html5' ).hasClass( 'parsley-success' ) ).to.be( true );
} )
it ( 'max', function () {
triggerSubmitValidation( '#max', '12' );
expect( $( '#max' ).hasClass( 'parsley-error' ) ).to.be( true );
Expand Down Expand Up @@ -263,6 +280,8 @@ var testSuite = function () {
, { url: "foo", expected: false, strict: false }
, { url: "foo:bar", expected: false, strict: false }
, { url: "foo://bar", expected: false, strict: false }

// absolutely finish by false to test error message
, { url: "ého", expected: false, strict: false }
];

Expand All @@ -274,6 +293,10 @@ var testSuite = function () {
triggerSubmitValidation( '#typeurl', 'foo' );
expect( getErrorMessage( '#typeurl', 'type') ).to.be( 'This value should be a valid url.' );
} )
it ( 'url html5', function () {
$( '#typeurl-html5' ).val( "http://foo.bar" );
expect( $( '#typeurl-html5' ).parsley( 'validate' ) ).to.be( true );
} )
it ( 'url strict + global config overriding type message', function () {
for ( var i in urls ) {
$( '#typeurlstrict' ).val( urls[i].url );
Expand All @@ -295,6 +318,14 @@ var testSuite = function () {
triggerSubmitValidation( '#typeemail', '[email protected]' );
expect( $( '#typeemail' ).hasClass( 'parsley-success' ) ).to.be( true );
} )
it ( 'email html5', function () {
triggerSubmitValidation( '#typeemail-html5', '[email protected]' );
expect( $( '#typeemail-html5' ).hasClass( 'parsley-success' ) ).to.be( true );
} )
it ( 'range html5', function () {
triggerSubmitValidation( '#typerange-html5', 8 );
expect( $( '#typerange-html5' ).hasClass( 'parsley-success' ) ).to.be( true );
} )
it ( 'digits', function () {
triggerSubmitValidation( '#typedigits', 'foo' );
expect( $( '#typedigits' ).hasClass( 'parsley-error' ) ).to.be( true );
Expand Down

0 comments on commit 5726291

Please sign in to comment.