Author Archives: Markus Staab

Validator.destroy()

Validator.destroy()

Description: Destroys this instance of validator freeing up resources and unregistering events.

Example:

Destroying an instance of validator.

1
2
3
4
5
6
7
8
9
10
11
12
13
 
/*

 * On SPA page start.

 */

var validator = $( "#myform" ).validate();

 
/*

 * Just before SPA page's navigation away.

 */

validator.destroy();

 
/*

 * After this point the #myForm form is back to its original boring state.

 */

step method

step( value )Returns: Boolean

Description: Makes the element require a given step.

Example:

Makes "field" required and step of 10.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Makes "field" required and step of 10.</title>

<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">

 
</head>

<body>

<form id="myform">

<label for="field">Required, step 10: </label>

<input type="text" class="left" id="field" name="field">

<br/>

<input type="submit" value="Validate!">

</form>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

<script>

// just for the demos, avoids form submit

jQuery.validator.setDefaults({

  debug: true,

  success: "valid"

});

$( "#myform" ).validate({

  rules: {

    field: {

      required: true,

      step: 10

    }

  }

});

</script>

</body>

</html>

Demo:

normalizer

normalizer( value )Returns: String

Description: Prepares/transforms the elements value for validation.

Transform the value of an element and the result for validation instead of the initial value. The normalizer can be defined global to all elements or local to only one element. With that said, the local normalizer will only run for the element for which it was defined. The global normalizer will run for all validated elements. This normalizer can be then overrided for each element, as needed, by attaching one to it. This way only the local one will run for that element, and the global one will run for others.

Note that this method:

  • Has been available since version 1.15.0

  • Doesn't change the elements' value, it only changes the value used for validation.

  • Gets the value passed as argument, and "this" within it references the corresponding DOMElement.

  • For versions between 1.15.0 and 1.17.0, it must return a string value. And as of 1.17.1, it can return any value including null and undefined.

Examples:

Example: Makes "field" required and use a normalizer to trim its value before validating

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Makes "field" required and use a normalizer to trim its value before validating</title>

<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">

 
</head>

<body>

<form id="myform">

<label for="field">Required: </label>

<input class="left" id="field" name="field">

<br/>

<input type="submit" value="Validate!">

</form>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

<script>

// just for the demos, avoids form submit

jQuery.validator.setDefaults({

  debug: true,

  success: "valid"

});

$( "#myform" ).validate( {

  rules: {

    field: {

      required: true,

      normalizer: function( value ) {

        // Trim the value of the `field` element before

        // validating. this trims only the value passed

        // to the attached validators, not the value of

        // the element itself.

        return $.trim( value );

      }

    }

  }

} );

</script>

</body>

</html>

Demo:

Example: Makes "url" required and use a normalizer to append 'http://', if not present, to the value of the "url" element before validating

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Makes "url" required and use a normalizer to append 'http://', if not present, to the value of the "url" element before validating</title>

<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">

 
</head>

<body>

<form id="myform">

<label for="url_input">url: </label>

<input class="left" id="url_input" name="url_input">

<br/>

<input type="submit" value="Validate!">

</form>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

<script>

// just for the demos, avoids form submit

jQuery.validator.setDefaults({

  debug: true,

  success: "valid"

});

$( "#myform" ).validate( {

  rules: {

    url_input: {

      required: true,

      url: true,

      normalizer: function( value ) {

        var url = value;

 
        // Check if it doesn't start with http:// or https:// or ftp://

        if ( url && url.substr( 0, 7 ) !== "http://"

            && url.substr( 0, 8 ) !== "https://"

            && url.substr( 0, 6 ) !== "ftp://" ) {

          // then prefix with http://

          url = "http://" + url;

        }

 
        // Return the new url

        return url;

      }

    }

  }

} );

</script>

</body>

</html>

Demo:

Example: Using a global normalizer in conjunction with a local one

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Using a global normalizer in conjunction with a local one</title>

<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">

 
</head>

<body>

<form id="myform">

<label for="username">Required: </label>

<input class="left" id="username" name="username">

<br/>

<label for="url_input">url: </label>

<input class="left" id="url_input" name="url_input">

<br/>

<input type="submit" value="Validate!">

</form>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

<script>

// just for the demos, avoids form submit

jQuery.validator.setDefaults({

  debug: true,

  success: "valid"

});

$( "#myform" ).validate( {

  // This global normalizer will trim the value of all elements

  // before validatng them.

  normalizer: function( value ) {

    return $.trim( value );

  },

  rules: {

    username: {

      required: true

    },

    url_input: {

      required: true,

      url: true,

 
      // We don't need to trim the value of this element, so we overrided

      // the global normalizer in order to append 'http://' to the url value

      // if doesn't already.

      normalizer: function( value ) {

        var url = value;

 
        // Check if it doesn't start with http:// or https:// or ftp://

        if ( url && url.substr( 0, 7 ) !== "http://"

            && url.substr( 0, 8 ) !== "https://"

            && url.substr( 0, 6 ) !== "ftp://" ) {

          // then prefix with http://

          url = "http://" + url;

        }

 
        // Return the new url

        return url;

      }

    }

  }

} );

</script>

</body>

</html>

Demo:

jQuery.validator.methods

Description: Object holding all validation methods known to the validator. This can be accessed to override individual methods, while keeping the default messages.

    Example:

    Sets a custom email pattern for the built-in email validation rule.

    1
    2
    3
    		 
    $.validator.methods.email = function( value, element ) {

      return this.optional( element ) || /[a-z]+@[a-z]+\.[a-z]+/.test( value );

    }