You are viewing limited content. For full access, please sign in.

Question

Question

Preventing Form Submission Disables Form

Laserfiche Forms Version 10 How To
Updated July 17, 2019
asked on July 16, 2019

Hi all,

 

I'm new to Laserfiche forms so forgive my ignorance.  The code below is not supposed to do anything, just playing with the functionality for the sake of learning how this all works.  When I return false in the onSubmit, it stops the submission, displays "Submitting..." at the bottom of the form and disables all form fields.  What am I doing wrong here? Shouldn't it just stop the submission process and leave the form as is?

 

$(document).ready(function () {
  
  $("#form1").on("submit", function(event) {
      //event.preventDefault();
      return false;
         
  });
});
 

0 0

Answer

SELECTED ANSWER
replied on July 17, 2019

This is set to detect changes to the time input or the drop down for selecting AM/PM for a field with a custom "startTime" CSS class.

When a change occurs, it adds 1 minute to the selected time, then sets that as the minimum value for a field with the custom "endTime" CSS class.

$(document).ready(function(){
  $('.startTime').on('change','input, select',function(){
    // get selected time
    var time = $('.startTime input').val().split(':');
    var period = $('.startTime select').val();
    
    // add 1 minute
    time[1] = ('0' + (time[1] + 1)).slice(-2);
    
    // get end time field
    var end = $('.endTime input');
    
    // set end time minimum
    end.attr('min',time.join(':') + ' ' + period.toUpperCase());
    
    // trigger validation if end time is not empty
    if(end.val() != '') end.parsley().validate();    
  });
});

If you're using a table, or have multiple time fields, then things get more complicated, but this will give you a general idea.

 

Technically you could set the max of the start time in a similar way, but you can run into a lot of problems if you have both start and end altering the boundaries.

Things behave more predictably if you choose one, and setting a min based on start time is usually the most practical since most people will set start time first.

0 0

Replies

replied on July 16, 2019 • Show version history

The thing to consider is that Forms is not using a "simple" form submission. Although you may be interrupting the submission itself, this does not stop all of the JavaScript/JQuery events that are triggered when the user clicks the submit button.

When the user goes to submit a LF Form, it is running validation checks on the fields and doing a lot of other work before it actually sends the data to the server. My guess is that your code is only stopping that last piece and not all of the precursor events.

If you want to prevent submission, you should disable or hide the entire submit button.

0 0
View 4 previous replies
replied on July 16, 2019

Okay, makes sense.  My goal in this case is to take care of some field data validation before allowing the submission.  What's the common way people achieve this?

0 0
replied on July 16, 2019

First, is there a reason the built in validation isn't an option?

You actually have a couple options.

  1. Create your own submit button, hide the default one. Then, when the user clicks your button run the validation, and if it passes, trigger the click on the built-in submit button
  2. Use JavaScript to add a custom parsley validator, which will work with the built-in processes and prevent submission if validation fails.

 

All the recent versions of Forms use Parsley Validation, which makes it very easy to add your own custom validation to get all the "bells and whistles" like flagging the field as in red and preventing submission.

Parsley is a common tool that's not exclusive to Laserfiche, so there's a lot of documentation you can reference.

0 0
replied on July 16, 2019

Okay, cool.  I'll look into Parsley.  In this case, I have 2 time fields representing a start and end time.  I'm converting them to military time to verify that the start time is before the end time, so there are essentially 4 fields worth of data that need to be complete before doing the validation, startTime, startTimeAMPM, endTime, endTimeAMPM. 

0 0
replied on July 16, 2019

That's definitely something you can do with Parsley. I've done similar things to make sure "start dates" are less than "end dates" on some forms in the past.

If you wanted to get super fancy, you can actually use JavaScript to dynamically update the min/max values for the fields based on the inputs; this would give you similar validation, but it is a bit more complicated.

0 0
replied on July 17, 2019

That sounds intriguing.  Is that like, in the onBlur of the 4 fields, update the min/max of the 1 or 2 time fields?  Is there an example of that code out there somewhere?

 

0 0
SELECTED ANSWER
replied on July 17, 2019

This is set to detect changes to the time input or the drop down for selecting AM/PM for a field with a custom "startTime" CSS class.

When a change occurs, it adds 1 minute to the selected time, then sets that as the minimum value for a field with the custom "endTime" CSS class.

$(document).ready(function(){
  $('.startTime').on('change','input, select',function(){
    // get selected time
    var time = $('.startTime input').val().split(':');
    var period = $('.startTime select').val();
    
    // add 1 minute
    time[1] = ('0' + (time[1] + 1)).slice(-2);
    
    // get end time field
    var end = $('.endTime input');
    
    // set end time minimum
    end.attr('min',time.join(':') + ' ' + period.toUpperCase());
    
    // trigger validation if end time is not empty
    if(end.val() != '') end.parsley().validate();    
  });
});

If you're using a table, or have multiple time fields, then things get more complicated, but this will give you a general idea.

 

Technically you could set the max of the start time in a similar way, but you can run into a lot of problems if you have both start and end altering the boundaries.

Things behave more predictably if you choose one, and setting a min based on start time is usually the most practical since most people will set start time first.

0 0
replied on July 17, 2019

Great, many thanks.  I'll give it a try.  

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...