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

Question

Question

Process Code Before Submit, Only if There are No Missing Required Fields

Forms
Updated July 17, 2017
asked on July 14, 2017 • Show version history

I have radio buttons and checkboxes that I have disabled in my Javascript to prevent additional user interaction.  In order for the values to be saved however, I have to enable them again prior to submit.  I do it with code like this: 

  $('.action-btn.Submit').on('click', function() {
    $('.disabled').each(function() {
      $(this).removeAttr('disabled');
      $(this).removeClass('disabled');
    });
  }); //end of $(".action-btn.Submit").on('click', function() {

This works, other than when a submit is attempted with missing required fields.  The submit will fail, and prompt the user to correct the fields, but now the radio buttons and checkboxes have been enabled.  I want to avoid this.

I've done other actions before with text fields, checking for the value of all required text fields and only performing the action if they are not blank, and that works well for text fields, but not for radio buttons and checkboxes since their values are a more complex proposition.

Is there a clean way to either:

1. Check that all required fields are complete before processing the action to enable the radio buttons and checkboxes, or

2. If the submit fails, trigger some code to disable the fields again?

Thanks!

1 0

Answer

SELECTED ANSWER
replied on July 14, 2017

I got it!  Thank you once again @████████and @████████- you definitely got me pointed in the right direction.

Getting the validation to trigger first was the trick.  However, I was struggling to get the onChange event to work properly - I had one checkbox that was getting marked when it ran that code and I have absolutely no idea how that was happening (bug in my code probably) otherwise it was working, but a little slow (it's a big form, lots of fields).  Knowing that the error checking that occurs when I click submit is pretty fast, I started searching for ways to trigger that same validation without having to cycle every field on the form.  And I found it!

$('#form1').parsley().validate();

This triggers the validation on the entire form, just like it does when the form is submitted.

I got it after reading these posts:

http://answers.laserfiche.com/questions/120593/Prevalidating-required-fields-when-using-pagination-in-102#120674

https://answers.laserfiche.com/questions/116675/Hide-Next-Button-in-Pagination-Until-Required-Fields-are-Completed

http://answers.laserfiche.com/questions/116339/How-to-hide-error-text-message-using-javascript#117189

I set it up so that when I click the Submit button, it runs the validation on all form fields.  After it does that, it checks for elements with the parsley-error class.  If none were found, it proceeds with removing the disabled status on the radio buttons and checkboxes.  If any fields were found with the parsley-error class, the radio buttons and checkboxes remain disabled.

This worked wonderfully!  Here's the code I ended up with: 

  $('.action-btn.Submit').on('click', function() {
    var noErrors = true; 
    $('#form1').parsley().validate();
    $('.parsley-error').each(function() {
      noErrors = false; 
    });
    if (noErrors) { 
      $('.disabled').each(function() {
        $(this).removeAttr('disabled');
        $(this).removeClass('disabled');
      });
    }
  });

I've done other more complicated things before to try to validate certain fields, this is a lot easier, I may have to go back and optimize other forms...

6 0

Replies

replied on July 14, 2017

Hi Matt!

You know the ins and outs of jQuery better than I do, but I have an idea.

Any required field that isn't filled when the "Submit" button is clicked gets the following HTML inserted beneath it:

<ul class="parsley-errors-list filled" id="parsley-id-XX">
	<li class="parsley-required"> == $0
		"Value is required."
		::after
	</li>
	::after
</ul>

The important thing there is the '.parsley-required' class. Since (as far as I can tell) the only time that class appears in the form's HTML is after "Submit" is clicked when required fields aren't populated, I'm wondering if something like the following will work:

$('.action-btn.Submit').on('click', function() {
      setTimeout(function() {
        var parsleycheck = $('.parsley-required').length;
    	if (parsleycheck === 0) {
  			$('.disabled').each(function() {
   				$(this).removeAttr('disabled');
   	 			$(this).removeClass('disabled');
 	 		});
        }
   	else if (parsleycheck > 0) {
      		// stuff
    	}, 500);
	});

My thinking is that since the '.parsley-required' bits get added almost instantaneously, we can use setTimeout() to make sure enough time has elapsed for those elements to be added. Then, we count the number of instances of '.parsley-required'--if there are no instances of this class, proceed as usual and remove the '.disabled' class from relevant elements. Otherwise, '//stuff' (I'm not sure what exactly, but it would involve not removing the '.disabled' class).

Anyway, I hope you're able to get this working--please share your solution once you do!

~Rob

2 0
View 2 previous replies
replied on July 14, 2017

Rob is on the right track, but you need to trigger those validations first otherwise your custom event could pass the check and the errors wouldn't show up until after the radio buttons are enabled.

One thing I've done in the past is manually trigger the onChange event for every field, which will cause the validation to trigger, then check for any of the error notifications use use the condition Rob proposed.

However, you may also need to account for more than one type of error message because, depending on the field type errors/failed validation will involve elements with a variety of similar, but not identical, classes.

1 0
replied on July 14, 2017

I like these @████████ and @████████.  

I had been experimenting with something similar earlier on, but had given up on that because my checking for the errors was occurring before the validation had processed, so it wasn't triggering correctly.

I like the ideas of either including a SetTimeout to delay the process or triggering the OnChange events.  Neither option had occurred to me.

I do think you are right Jason about the error message though.  When I was experimenting earlier I was using the parsley-success and parsley-error classes.  These are added to the field after the validation is run.

<div id="Field51" class="parsley-error">
<div id="Field51" class="parsley-success">

With that I should be able to either could how many times the class appears, or just set a variable to true/false.  The piece I was missing was how to get those classes to get added to the fields if the user hasn't touched the field.

I'm excited to try these solutions and will report back.

Thanks!

1 0
SELECTED ANSWER
replied on July 14, 2017

I got it!  Thank you once again @████████and @████████- you definitely got me pointed in the right direction.

Getting the validation to trigger first was the trick.  However, I was struggling to get the onChange event to work properly - I had one checkbox that was getting marked when it ran that code and I have absolutely no idea how that was happening (bug in my code probably) otherwise it was working, but a little slow (it's a big form, lots of fields).  Knowing that the error checking that occurs when I click submit is pretty fast, I started searching for ways to trigger that same validation without having to cycle every field on the form.  And I found it!

$('#form1').parsley().validate();

This triggers the validation on the entire form, just like it does when the form is submitted.

I got it after reading these posts:

http://answers.laserfiche.com/questions/120593/Prevalidating-required-fields-when-using-pagination-in-102#120674

https://answers.laserfiche.com/questions/116675/Hide-Next-Button-in-Pagination-Until-Required-Fields-are-Completed

http://answers.laserfiche.com/questions/116339/How-to-hide-error-text-message-using-javascript#117189

I set it up so that when I click the Submit button, it runs the validation on all form fields.  After it does that, it checks for elements with the parsley-error class.  If none were found, it proceeds with removing the disabled status on the radio buttons and checkboxes.  If any fields were found with the parsley-error class, the radio buttons and checkboxes remain disabled.

This worked wonderfully!  Here's the code I ended up with: 

  $('.action-btn.Submit').on('click', function() {
    var noErrors = true; 
    $('#form1').parsley().validate();
    $('.parsley-error').each(function() {
      noErrors = false; 
    });
    if (noErrors) { 
      $('.disabled').each(function() {
        $(this).removeAttr('disabled');
        $(this).removeClass('disabled');
      });
    }
  });

I've done other more complicated things before to try to validate certain fields, this is a lot easier, I may have to go back and optimize other forms...

6 0
replied on July 14, 2017

Nice! I never really thought about that before. I'm going to end up using this validation trigger in some of my forms too.

1 0
replied on July 17, 2017

Very good stuff--I'll definitely save that snippet for use in the future. Thanks for sharing!

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

Sign in to reply to this post.

Details
Related Posts
Loading ...