Skip to content
Open
26 changes: 14 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Some examples of use can be found [here](http://pristine.js.org/demo.html).

Include the javascript file in your html head or just before the closing body tag

```html
```html
<script src="dist/pristine.js" type="text/javascript"></script>
```

Expand All @@ -27,7 +27,7 @@ window.onload = function () {

form.addEventListener('submit', function (e) {
e.preventDefault();

// check if the form is valid
var valid = pristine.validate(); // returns true or false

Expand All @@ -40,13 +40,13 @@ window.onload = function () {

It automatically validates `required, min, max, minlength, maxlength` attributes and the value of type attributes
like `email, number` and more..


`Pristine` takes `3` parameters

- **form** The form element

- **config** An object containing the configuration. Default is bootstrap's configuration which is
- **config** An object containing the configuration. Default is bootstrap's configuration which is

<a id="defaultConfig"></a>

Expand All @@ -61,7 +61,9 @@ let defaultConfig = {
// type of element to create for the error text
errorTextTag: 'div',
// class of the error text element
errorTextClass: 'text-help'
errorTextClass: 'text-help',
// enable live validation after first form submission (requires live parameter to be true)
liveAfterFirstValitation: true
};
```

Expand Down Expand Up @@ -106,11 +108,11 @@ pristine.addValidator(elem, function(value) {
Pristine.addValidator("my-range", function(value, param1, param2) {
// here `this` refers to the respective input element
return parseInt(param1) <= value && value <= parseInt(param2)

}, "The value (${0}) must be between ${1} and ${2}", 5, false);
```

Now you can assign it to your inputs like this
Now you can assign it to your inputs like this

```html
<input type="text" class="form-control" data-pristine-my-range="10,30" />
Expand Down Expand Up @@ -142,7 +144,7 @@ Add an attribute like `data-pristine-<ValidatorName>-message`with the custom mes
## API
**Pristine(form, config, live)**
<br/>*Constructor*

| Parameter | Default | Required? | Description|
| --- | ---- | ----- | ---- |
| `form`| - |<center>✔</center> |The form element|
Expand Down Expand Up @@ -236,15 +238,15 @@ Add an attribute like `data-pristine-<ValidatorName>-message`with the custom mes

**pristine.reset()**
<br/>*Reset the errors in the form*


<br/>

**pristine.destroy()**
<br/>*Destroy the pristine object*

<br/><br/>
> The goal of this library is not to provide every possible type of validation and thus becoming a bloat.
> The goal of this library is not to provide every possible type of validation and thus becoming a bloat.
> The goal is to provide most common types of validations and a neat way to add custom validators.

## License
Expand Down
Loading