Extending ActiveForm on the Client Side
The [[yii\widgets\ActiveForm]] widget comes with a set of JavaScript methods that are used for client validation. Its implementation is very flexible and allows you to extend it in different ways. In the following these are described.
ActiveForm events
ActiveForm triggers a series of dedicated events. Using the code like the following you can subscribe to these events and handle them:
$('#contact-form').on('beforeSubmit', function (e) {
if (!confirm("Everything is correct. Submit?")) {
return false;
}
return true;
});In the following we'll review events available.
beforeValidate
beforeValidate is triggered before validating the whole form.
The signature of the event handler should be:
function (event, messages, deferreds)where
event: an Event object.messages: an associative array with keys being attribute IDs and values being error message arrays for the corresponding attributes.deferreds: an array of Deferred objects. You can usedeferreds.add(callback)to add a new deferred validation.
If the handler returns a boolean false, it will stop further form validation after this event. And as a result, afterValidate event will not be triggered.
afterValidate
afterValidate event is triggered after validating the whole form.
The signature of the event handler should be:
function (event, messages, errorAttributes)where
event: an Event object.messages: an associative array with keys being attribute IDs and values being error message arrays for the corresponding attributes.errorAttributes: an array of attributes that have validation errors. Please refer toattributeDefaultsfor the structure of this parameter.
beforeValidateAttribute
beforeValidateAttribute event is triggered before validating an attribute. The signature of the event handler should be:
function (event, attribute, messages, deferreds)where
event: an Event object.attribute: the attribute to be validated. Please refer toattributeDefaultsfor the structure of this parameter.messages: an array to which you can add validation error messages for the specified attribute.deferreds: an array of Deferred objects. You can usedeferreds.add(callback)to add a new deferred validation.
If the handler returns a boolean false, it will stop further validation of the specified attribute. And as a result, afterValidateAttribute event will not be triggered.
afterValidateAttribute
afterValidateAttribute event is triggered after validating the whole form and each attribute.
The signature of the event handler should be:
function (event, attribute, messages)where
event: an Event object.attribute: the attribute being validated. Please refer toattributeDefaultsfor the structure of this parameter.messages: an array to which you can add additional validation error messages for the specified attribute.
beforeSubmit
beforeSubmit event is triggered before submitting the form after all validations have passed.
The signature of the event handler should be:
function (event)where event is an Event object.
If the handler returns a boolean false, it will stop form submission.
ajaxBeforeSend
ajaxBeforeSend event is triggered before sending an AJAX request for AJAX-based validation.
The signature of the event handler should be:
function (event, jqXHR, settings)where
event: an Event object.jqXHR: a jqXHR objectsettings: the settings for the AJAX request
ajaxComplete
ajaxComplete event is triggered after completing an AJAX request for AJAX-based validation.
The signature of the event handler should be:
function (event, jqXHR, textStatus)where
event: an Event object.jqXHR: a jqXHR objecttextStatus: the status of the request ("success", "notmodified", "error", "timeout", "abort", or "parsererror").
Submitting the form via AJAX
While validation can be made on client side or via AJAX request, the form submission itself is done as a normal request by default. If you want the form to be submitted via AJAX, you can achieve this by handling the beforeSubmit event of the form in the following way:
var $form = $('#formId');
$form.on('beforeSubmit', function() {
var data = $form.serialize();
$.ajax({
url: $form.attr('action'),
type: 'POST',
data: data,
success: function (data) {
// Implement successful
},
error: function(jqXHR, errMsg) {
alert(errMsg);
}
});
return false; // prevent default submit
});To learn more about the jQuery ajax() function, please refer to the jQuery documentation.
Adding fields dynamically
In modern web applications you often have the need of changing a form after it has been displayed to the user. This can for example be the addition of new fields after click on a "plus"-icon. To enable client validation for these fields, they have to be registered with the ActiveForm JavaScript plugin.
You have to add a field itself and then add it to validation list:
$('#contact-form').yiiActiveForm('add', {
id: 'address',
name: 'address',
container: '.field-address',
input: '#address',
error: '.help-block',
validate: function (attribute, value, messages, deferred, $form) {
yii.validation.required(value, messages, {message: "Validation Message Here"});
}
});To remove a field from validation list so it's not validated you can do the following:
$('#contact-form').yiiActiveForm('remove', 'address');
