Menu icon Foundation
Multiple forms using $(document) and Abide Events

I would appreciate a bit of clarity on using $(document) along with ZURB Template for a site that contains multiple forms. 

The documentation shows the following

$(document)
  // field element is invalid
  .on("invalid.zf.abide", function(ev,elem) {
    console.log("Field id "+ev.target.id+" is invalid");
  })
  // field element is valid
  .on("valid.zf.abide", function(ev,elem) {
    console.log("Field name "+elem.attr('name')+" is valid");
  })
  // form validation failed
  .on("forminvalid.zf.abide", function(ev,frm) {
    console.log("Form id "+ev.target.id+" is invalid");
  })
  // form validation passed, form will submit if submit event not returned false
  .on("formvalid.zf.abide", function(ev,frm) {
    console.log("Form id "+frm.attr('id')+" is valid");
    // ajax post form 
  })
  // to prevent form from submitting upon successful validation
  .on("submit", function(ev) {
    ev.preventDefault();
    console.log("Submit for form id "+ev.target.id+" intercepted");
  });

This code appears to get register the events with the global document and the various functions are called when the event occurs. But what happens if you have multiple forms on different pages? From this code, it appears that I would have to check the form ID in each of the "on" handlers and then use conditional logic to determine what to do based on the form ID. This seems like poor design, especially since it forces me to put this code in a general file such as app.js rather than one that is targeted to the target form. The documentation also points out that the "on" functions can be assigned directly to the form as in the following code:

// You can bind field or form event selectively
$("#foo").on("invalid.zf.abide", function(ev,el) {
  alert("Input field foo is invalid");
});
$("#bar").on("formvalid.zf.abide", function(ev,frm) {
  alert("Form is valid, finally!");
  // do something perhaps
});

By binding the "on" function to the form, I can indeed move the code into specific files, however the execution of $(document).foundation() in app.js seems to undo these events and they never get fired.

What is the right way to use Abide when multiple forms are involved and the code should be broken into logical files?

abidemultiple formsfoundation 6

I would appreciate a bit of clarity on using $(document) along with ZURB Template for a site that contains multiple forms. 

The documentation shows the following

$(document)
  // field element is invalid
  .on("invalid.zf.abide", function(ev,elem) {
    console.log("Field id "+ev.target.id+" is invalid");
  })
  // field element is valid
  .on("valid.zf.abide", function(ev,elem) {
    console.log("Field name "+elem.attr('name')+" is valid");
  })
  // form validation failed
  .on("forminvalid.zf.abide", function(ev,frm) {
    console.log("Form id "+ev.target.id+" is invalid");
  })
  // form validation passed, form will submit if submit event not returned false
  .on("formvalid.zf.abide", function(ev,frm) {
    console.log("Form id "+frm.attr('id')+" is valid");
    // ajax post form 
  })
  // to prevent form from submitting upon successful validation
  .on("submit", function(ev) {
    ev.preventDefault();
    console.log("Submit for form id "+ev.target.id+" intercepted");
  });

This code appears to get register the events with the global document and the various functions are called when the event occurs. But what happens if you have multiple forms on different pages? From this code, it appears that I would have to check the form ID in each of the "on" handlers and then use conditional logic to determine what to do based on the form ID. This seems like poor design, especially since it forces me to put this code in a general file such as app.js rather than one that is targeted to the target form. The documentation also points out that the "on" functions can be assigned directly to the form as in the following code:

// You can bind field or form event selectively
$("#foo").on("invalid.zf.abide", function(ev,el) {
  alert("Input field foo is invalid");
});
$("#bar").on("formvalid.zf.abide", function(ev,frm) {
  alert("Form is valid, finally!");
  // do something perhaps
});

By binding the "on" function to the form, I can indeed move the code into specific files, however the execution of $(document).foundation() in app.js seems to undo these events and they never get fired.

What is the right way to use Abide when multiple forms are involved and the code should be broken into logical files?

Adam Christianson 11 days ago

I'm running into a similar issue. Did you ever get an answer on this?

 

Adam Christianson 11 days ago

I'm running into a similar issue. Did you ever get an answer on this?