Forums

form_setup_html.php jquery validation

Permalink
Hi,

I have a custom block that uses the jquery validate plugin to validate the input client-side before submit. Like so:

$('#ccm-block-form').validate();

It works in v5.5 but in 5.6 it validates but does not cancel the submit on invalid input. I see the error message flash before the dialog closes.

It appears that c5 v5.6 is also binding to the submit event on the form and somehow preventing the validate plugin from stopping the submit (I assume the validate plugin uses e.preventDefault).

The following code fixes the issue by unbinding the c5 event but I would like to know why it is necessary and if it breaks anything:

$('#ccm-block-form').unbind("submit").validate();

Thanks for any insight.

Jeff
JeffPaetkau
 
JohntheFish replied on at Permalink Reply
JohntheFish
This may be simply the order of script file loading altering the order of jQuery ready event handling, which in turn alters the order of attaching submit handlers. Changing an addFooterItem to addheaderItem or something along those lines could be all you need to do.

I suspect your unbind is disconnecting c5's own validation stub (C5 has some built in js methods for in-browser edit form validation that you can declare functions for)

Another way round it is to catch the click event on the submit button, which fires before the submit event (and if you return false should prevent a submit from firing).
JeffPaetkau replied on at Permalink Reply
JeffPaetkau
Hi,

Grrr ... it gets more complicated. Looking into it further it looks like a conflict between the jQuery Validate plugin and the jQuery Form plugin used by C5.

This post set me on the right track:
http://stackoverflow.com/questions/1566257/jquery-validation-form-p...

$('#ccm-block-form').unbind("submit").validate({submitHandler: function(form) {
  $(form).ajaxSubmit({
    type: "POST",
    iframe: !0,
    beforeSubmit: function () {
      ccm_hideHighlighter();
      $("input[name=ccm-block-form-method]").val("AJAX");
      jQuery.fn.dialog.showLoader();
      return ccm_blockFormSubmit()
    },
    success: function (e) {
      var bID = <?php echo $controller->bID ? $controller->bID : "null"; ?>;
      if(bID != null) {
        ccm_parseBlockResponse(e, bID, 'edit');
      }else{
Viewing 15 lines of 20 lines. View entire code block.