rbucur
rbucur

Hello, I have been trying to use the Data attributes API to create some AJAX forms with validations. On the first clicking of submit button, everything goes well, and user sees validation messages below the inputs of the form.

However, if user only edits some of the invalid fields, and then clicks again submit, the obsolete messages for the fields that have been edited should disappear, and this is not happening.

Code for an input field:

<div class="form-group row" id="rowid">
 <label for="someid" class="control-label text-md-right col-md-2">Label</label>
  <div class="col-md-10">
   <input type="text" id="someid" name="InputField" class="form-control" >
   <b data-validate-error="InputField" class="text-danger"></b>
  </div>
</div>

Form is using following labels:

data-request="{{__SELF__}}::onHandler"  
data-request-update=" '{{__SELF__}}::partial' : '#FormToUpdate'"
data-request-validate   novalidate>

I have found a solution to overcome this, but don't think it's the best, since i've edited the framework.extras.js, which is part of the core..

  • i've added $('[data-validate-for]', $this).removeClass('visible') and $('[data-validate-error]', $this).removeClass('visible') on the ajaxPromise method, - then added $container.removeClass('invisible') before calling $container.addClass('visible')
  • same applies to $field

Any ideas? For the moment, switching to JavaScript API for the Ajax calls would not be a viable solution.

Thank you, Raul B.

daftspunk
daftspunk

Hi Raul,

Updating the core framework file is not ideal, it appears the code to hide these invalid fields is already in place

$(document).on('ajaxPromise', '[data-request][data-request-validate]', function() {
    var $this = $(this).closest('form')
    $('[data-validate-for]', $this).removeClass('visible')
    $('[data-validate-error]', $this).removeClass('visible')
})

the obsolete messages for the fields that have been edited should disappear, and this is not happening.

The above code (taken from modules\system\assets\js\framework.extras.js) is supposed to ensure this is happening. So there must be something else failing

Last updated

rbucur
rbucur

Hi again, Thanks for your response, and by the way, I'm absolutely loving OctoberCMS, it's a great piece of engineering that I enjoy every day :)

From what i've seen, the framework.extras.js renders the visible class to elements containing the error message, but messages are being placed in my case under the following html 'container':

<b data-validate-error="InputField" class="text-danger"></b>

So basically, when i have a validation field, this above code will look like:

<b data-validate-error="InputField" class="text-danger visible">Error message</b>

And then, at resubmit, the framework.extras.js will only remove the class "visible" from the element marked with the data-validate-error attribute, not the error message itself contained within, so the code will look like this:

<b data-validate-error="InputField" class="text-danger">Error message</b>

So i either need to delete that message, or to change the visible class to invisible, to render the entire b element invisible in the page.

I've been spending a lot of time on this, and couldn't come up with any other solution, that's why i asked the community and you guys for ideas :) .

Thanks again, Raul

1-4 of 4