Skip to content

Commit a4c458f

Browse files
Update README.md
1 parent fb8b52f commit a4c458f

File tree

1 file changed

+129
-2
lines changed

1 file changed

+129
-2
lines changed

README.md

Lines changed: 129 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,15 +97,15 @@ Read the documentation for the date module at [#date-validators](#date-validator
9797
* Suggest countries (english only)
9898
* Suggest states in the US
9999

100-
Read the documentation for the location module at [http://formvalidator.net/#location-validators](http://formvalidator.net/#location-validators)
100+
Read the documentation for the location module at [#location-validators](/#location-validators)
101101

102102
### Module: file
103103
* **mime**
104104
* **extension**
105105
* **size** (file size)
106106
* **dimension** (size dimension and ratio)
107107

108-
Read the documentation for the file module at [http://formvalidator.net/#file-validators](http://formvalidator.net/#file-validators)
108+
Read the documentation for the file module at [#file-validators](#file-validators)
109109

110110
### Module: logic
111111

@@ -749,6 +749,133 @@ This validator is the same as the default <a href="#default-validators_dates">da
749749
<input type="text" data-validation="time">
750750
```
751751

752+
753+
## Location validators
754+
755+
### Country
756+
757+
```
758+
<!-- Validate country (english only) -->
759+
<input type="text" data-validation="country"/>
760+
```
761+
762+
### State (US)
763+
764+
```
765+
<!-- Validate US state -->
766+
<input type="text" data-validation="federatestate"/>
767+
```
768+
769+
### Longitude and Latitude
770+
771+
```
772+
<!-- Validate longitude and latitude (eg 40.714623,-74.006605) -->
773+
<input type="text" data-validation="longlat"/>
774+
```
775+
776+
### Suggest country/state
777+
778+
By using this function you'll make it easier for your visitor to input a country or state.
779+
780+
```
781+
<form action="">
782+
...
783+
<p>
784+
<strong>Which country are you from?</strong>
785+
<input name="user_country" data-validation="country"/>
786+
</p>
787+
<p>
788+
<strong>Which state do you live in?</strong>
789+
<input name="user_home_state" data-validation="federatestate"/>
790+
</p>
791+
</form>
792+
</div>
793+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
794+
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
795+
<script>
796+
$.validate({
797+
modules : 'location',
798+
onModulesLoaded : function() {
799+
$('input[name="user_country"]').suggestCountry();
800+
$('input[name="user_home_state"]').suggestState();
801+
}
802+
});
803+
</script>
804+
```
805+
806+
## File validators
807+
808+
### File size
809+
810+
This validation is only supported by Internet Explorer 10, Mozilla FireFox v >= 3.6 and any of the later versions of webkit based browsers.
811+
812+
```
813+
<!-- Validate that file isn't larger than 512 kilo bytes -->
814+
<input type="file" data-validation="size" data-validation-max-size="512kb" />
815+
816+
<!-- Validate that file isn't larger than 3 mega bytes -->
817+
<input type="file" data-validation="size" data-validation-max-size="3M" />
818+
```
819+
820+
### File type
821+
822+
This validation will fall back on checking the file extension in older browsers. In modern browsers the validation will check that any of the extensions in <code>data-validation-allowing</code> exists in the mime type declaration of the file. This means that <code>data-validation-allowing="pdf"</code> will work in both modern browsers (checking against "application/pdf") and older browsers (checking the file extension ".pdf").
823+
824+
```
825+
<!-- Validate that file is an image of type JPG, GIF or PNG and not larger than 2 mega bytes -->
826+
<input type="file" data-validation="mime size" break0="" data-validation-allowing="jpg, png, gif" break=""
827+
data-validation-max-size="2M" />
828+
829+
<!-- Validate that a file is given and that it has .txt as extension -->
830+
<input type="file" data-validation="required extension" data-validation-allowing="txt" />
831+
```
832+
833+
Validating multiple files (with separate error messages depending on failed validation):
834+
835+
```
836+
<input type="file" multiple="multiple" name="images"
837+
data-validation="length mime size"
838+
data-validation-length="min2"
839+
data-validation-allowing="jpg, png, gif"
840+
data-validation-max-size="512kb"
841+
data-validation-error-msg-size="You can not upload images larger than 512kb"
842+
data-validation-error-msg-mime="You can only upload images"
843+
data-validation-error-msg-length="You have to upload at least two images"
844+
/>
845+
```
846+
847+
### Image dimension and ratio
848+
849+
Use the validator <code>dimension</code> to check the dimension of an image (jpg, gif or png).
850+
851+
```
852+
<!-- Validate that the image is no smaller than 100x100px -->
853+
<input data-validation="dimension mime" data-validation-allowing="jpg" break="" data-validation-dimension="min100" />
854+
855+
<!-- Validate that the image is no smaller than 300x500 px (width/height) -->
856+
<input data-validation="dimension mime" data-validation-allowing="jpg" break="" data-validation-dimension="min300x500" />
857+
858+
<!-- Validate that the image is no larger than 500x1000 px -->
859+
<input data-validation="dimension mime" data-validation-allowing="jpg" break="" data-validation-dimension="max500x1000" />
860+
861+
<!-- Validate that the image is no smaller than 100x100 px and no larger than 800x800 -->
862+
<input data-validation="dimension mime" data-validation-allowing="jpg" break="" data-validation-dimension="100-800" />
863+
864+
<!-- Validate that the image is no smaller than 200x400 px and no larger than 600x1200 -->
865+
<input data-validation="dimension mime" data-validation-allowing="jpg" break="" data-validation-dimension="200x400-600x1200" />
866+
```
867+
868+
Use the attribute <code>data-validation-ratio</code> to validate that the uploaded image has a certain ratio
869+
870+
```
871+
<!-- Validate that only square images gets uploaded -->
872+
<input data-validation="ratio mime" data-validation-allowing="jpg, png, gif" break="" data-validation-dimension="min100" data-validation-ratio="1:1" />
873+
874+
<!-- Validate that only somewhat square images gets uploaded -->
875+
<input data-validation="ratio mime" data-validation-allowing="jpg" break="" data-validation-dimension="min100" data-validation-ratio="8:10-12:10" />
876+
```
877+
878+
752879
## Changelog
753880

754881
#### 2.3.19

0 commit comments

Comments
 (0)