Use dojo ValidationTextBox with Symfony2 and ajax

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.