How use dojo ValidationTextBox with Symfony2 and ajax
In this post i show how i used symfony2, dojio and to validate a form loaded via ajax and how to change the size and other properties of ValidationTextBox.
This is a form loaded via ajax :
{% extends ‘::base.html.twig’ %}
{% block javascripts %}
{% endblock %}
{% block body %}
<form action=”{{ path(‘NdfExampleBundle_people’) }}” method=”post” {{ form_enctype(form) }} id=”forminsertpeople” dojoType=”dijit.form.Form”>
{{ form_widget(form.ci , { ‘attr’: {‘labelAttr’: ‘ci’,’labelType’:’html’,’dojoType’:’dijit.form.ValidationTextBox’,’maxLength’:’12’,
‘regExp’:’\\w{12}’,’invalidMessage’: ‘CI must to be 12 characters’} }) }}
<button dojoType=”dijit.form.Button” type=”submit” name=”submitButtonSave”
value=”Submit”>
Save
</button>
<img src=”404.gif” style=”position:absolute;width:0px;height:0px” onerror=”refreshPeople()”>
{% endblock %}
The main page mustĀ contain refreshPeople()
function refreshPeople() {
try {
dijit.byId('forminsertpeople').destroy();
}
catch (ex) {
}
// Change Width
var dum = dojo.byId('form_ci');
dojo.style(dum, "width", "12em");
dojo.parser.parse(dojo.byId('your_target'));
// Change maxLength
dum = dijit.byId('form_cognome');
dum.set( "maxlength", 20);
dojo.addOnLoad(function () {
var connectForm = dojo.byId("forminsertpeople");
dojo.connect(connectForm, "onsubmit", function (e) {
// connect to, and disable the submit of this form
e.preventDefault();
// post the form with all it's defaults
var mainForm = dijit.byId( "forminsertpeople" );
dojo.stopEvent(event);
if ( mainForm.validate() ) {
var form = dojo.byId("forminsertpeople");
dojo.xhrPost({
form:form,
load:function (data) {
// set the form's HTML to be the response
form.innerHTML = data;
}
});
}
});
});
dojo.parser.parse(dojo.byId('forminsertpeople'));
}
Note how the style changes are made beforeĀ dojo.parser.parse(dojo.byId(‘your_target’));
after instead the changes to the attributes of the validator.