Options
* — Required option
| Option | HTML attribute | Type | Description |
|---|---|---|---|
field* | data-fv-identical-field | String | The name of field that will be used to compare with current one |
message | data-fv-identical-message | String | The error message |
When setting options via HTML attributes, remember to enable the validator by setting data-fv-identical="true".
The message and other options can be updated on the fly via the updateMessage() and updateOption() methods
From v0.6.0, you don't need to set identical validator for all fields which you want them to be identical to each other. For example, instead of using identical validator for both fields as following
$('#differentForm').formValidation({
framework: 'bootstrap',
fields: {
password: {
validators: {
identical: {
field: 'confirmPassword',
message: 'The password and its confirm are not the same'
}
}
},
confirmPassword: {
validators: {
identical: {
field: 'password',
message: 'The password and its confirm are not the same'
}
}
}
}
});just set it to one of fields:
$('#differentForm').formValidation({
framework: 'bootstrap',
fields: {
confirmPassword: {
validators: {
identical: {
field: 'password',
message: 'The password and its confirm are not the same'
}
}
}
}
});The plugin then will update the message, icon, status of fields properly when you change value any fields.
Example
The following form requires the password and confirmation one to be the same using identical validator.
<form id="identicalForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Password</label>
<div class="col-xs-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Retype password</label>
<div class="col-xs-5">
<input type="password" class="form-control" name="confirmPassword" />
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#identicalForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
confirmPassword: {
validators: {
identical: {
field: 'password',
message: 'The password and its confirm are not the same'
}
}
}
}
});
});
</script><form id="identicalForm" class="form-horizontal"
data-fv-framework="bootstrap"
data-fv-icon-valid="glyphicon glyphicon-ok"
data-fv-icon-invalid="glyphicon glyphicon-remove"
data-fv-icon-validating="glyphicon glyphicon-refresh">
<div class="form-group">
<label class="col-xs-3 control-label">Password</label>
<div class="col-xs-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Retype password</label>
<div class="col-xs-5">
<input type="password" class="form-control" name="confirmPassword"
data-fv-identical="true"
data-fv-identical-field="password"
data-fv-identical-message="The password and its confirm are not the same" />
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#identicalForm').formValidation();
});
</script>Related validators
The following validators might be useful to you: