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

Question

Question

Force validation

Forms Version 10
Updated September 17, 2018
asked on September 14, 2018

After making a field not required through JavaScript, how does one force it to re-validate?

I have two mutually inclusive fields--they are not always required, but if there is a value in one, the other needs a value as well. The code below is working to make them required or not:

  $('.LodgingRate input,.Lodging input').blur(function(){
    if(($('.LodgingRate input').val() > 0 || $('.Lodging input').val() > 0) && !$('.Lodging .cf-required').length) {
      $('.LodgingRate input,.Lodging input').prop('required',true).attr('min',0.01).parent().siblings('.cf-label').append('<span class="cf-required">*</span>');
    } else if(!($('.LodgingRate input').val() > 0 || $('.Lodging input').val() > 0) && $('.Lodging .cf-required').length) {
      $('.LodgingRate input,.Lodging input').prop('required',false).removeAttr('min').parent().parent().find('.cf-required').remove();
    }
  });

The only problem I have is when the user:

  1. provides a value in one field (making both fields required)
  2. triggers the "Value is required" message in the second field
  3. then clears the value from the first field (making neither field required).

This leaves the error message and red highlight on the empty second field, which is no longer an error.

Laserfiche Forms Professional Version 10.3.1.635

0 0

Replies

replied on September 17, 2018

I would double-check line 5. 

What happens when you run line 5 from your console after the error messages appear? 

If you can successfully hide the error messages, then there is something wrong with your conditions.

 

Try adding something below under line 5:

$('.parsley-type').hide()

I think you've successfully removed the validation and the asterisk, but you didn't select the error-message itself. 

('.cf-required').remove() only removes the asterisk. 

0 0
replied on September 17, 2018

When leaving the field after clearing it (step 3 above), line 5 runs, so you see the asterisks disappear and the field just cleared does not show an error. Running line 5 again from the console doesn't appear to do anything different.

I tried your suggestion with `.parsley-type`, but that doesn't match any objects.

I hadn't considered trying to manually clear the error, though. Removing the `.parsley-error` class from the input and entirely removing the `.parsley-errors-list` element seems to do what I need:

$('.LodgingRate input,.Lodging input').prop('required',false).removeAttr('min').removeClass('parsley-error').parent().parent().find('.cf-required,.parsley-errors-list').remove();
1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...