How to access tapestry validation results inside jquery

[Sumanth <ro...@gmail.com>]

Hello Gurus,

I have a ajax form component with a submit button. My requirement is to
change the label of the button to "submitting.." and disable the button on
the form submit. This form component has a select input field.

<div class="col-xs-12 col-sm-4" t:type="select"
                  t:value="selectedTrainee"
t:model="traineeOptionSelectModel"

t:blankLabel="${message:pages.project.ProjectDetail.blankLabel}"
                  t:blankOption="always" t:validate="required" />

The script to disable the button.

define([ "jquery" ], function($) {

  return function(clientIdOfAjaxSubmitButton, processingLabel) {

      var jquerySelectorString = "#" + clientIdOfAjaxSubmitButton;
      $(jquerySelectorString).on('click', function() {

        var form = $(this).parents('form');

        form.submit(function(event) {

          $(this).val(processingLabel);

          $(jquerySelectorString).attr('disabled', 'disabled');
        });
      });
  }
});


The problem is even thought the select validation fails, the form gets
posted to the server (It feels like because) the button gets disabled. Is
there a way to access these validations from the tapestry in my jquery to
check and  if there are no errors then make the submit else prevent. Or is
there any other method?

Re: How to access tapestry validation results inside jquery

[Barry Books <tr...@gmail.com>]

In 5.4 there is an event for this.


define(["jquery","t5/core/events"], *function*($,events) {



       *return* *function*(parameters) {

             $('#'+parameters.id + ' :submit').removeAttr('disabled');



             $('#'+parameters.id).bind(events.form.prepareForSubmit,
*function*() {

                    $('#'+parameters.id + ' :submit').attr('disabled',
'disabled');

                    $('#'+parameters.id + ' :submit').val("Please Wait")

             });

       };

});



*public* *class* Sub1 {

       @Inject

       *private* JavaScriptSupport javaScriptSupport;



       @Inject

       *private* FormSupport formSupport;



       *void* afterRender(MarkupWriter writer) {

             JSONObject params = *new* JSONObject();

             params.put("id",formSupport.getClientId());

             javaScriptSupport.require("sub1").with(params);

       }



}

On Wed, Dec 3, 2014 at 7:43 AM, Sumanth <ro...@gmail.com> wrote:

> Hello Gurus,
>
> I have a ajax form component with a submit button. My requirement is to
> change the label of the button to "submitting.." and disable the button on
> the form submit. This form component has a select input field.
>
> <div class="col-xs-12 col-sm-4" t:type="select"
>                   t:value="selectedTrainee"
> t:model="traineeOptionSelectModel"
>
> t:blankLabel="${message:pages.project.ProjectDetail.blankLabel}"
>                   t:blankOption="always" t:validate="required" />
>
> The script to disable the button.
>
> define([ "jquery" ], function($) {
>
>   return function(clientIdOfAjaxSubmitButton, processingLabel) {
>
>       var jquerySelectorString = "#" + clientIdOfAjaxSubmitButton;
>       $(jquerySelectorString).on('click', function() {
>
>         var form = $(this).parents('form');
>
>         form.submit(function(event) {
>
>           $(this).val(processingLabel);
>
>           $(jquerySelectorString).attr('disabled', 'disabled');
>         });
>       });
>   }
> });
>
>
> The problem is even thought the select validation fails, the form gets
> posted to the server (It feels like because) the button gets disabled. Is
> there a way to access these validations from the tapestry in my jquery to
> check and  if there are no errors then make the submit else prevent. Or is
> there any other method?
>