Author Archives: Markus Staab

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.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.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.

Note that this method:

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.

Needs to return a String value, otherwise it will throw a TypeError exception.

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.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.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.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.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:

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 );
    }