[up-validate] but also target another fragment

[LaundroMat]

If I understand correctly, [up-validate] will only rerender the form (from the docs):

The form group around the changed field is updated with the server response.

I would like to update another fragment (.last_updated_on) after submitting the form. I'm using [up-validate] to trigger a submit when an input field loses focus. I can't immediately see another way of doing this without resorting to custom JavaScript.

Is there a way to either:

• Only submit when an input field loses focus using only unpoly selectors (and no custom JS)
• Or tell [up-validate] it should update a fragment outside of the form?

[adam12]

I don't believe you can get [up-validate] to target a fragment outside of the form. In this case, you could use an [up-hungry] element that's outside of the form and exists on both pages being rendered.

Only submit when an input field loses focus using only unpoly selectors (and no custom JS)

[up-watch-event="blur"] on the element you've applied [up-validate] might work for you.

Another option, which I haven't tested, is returning a modified X-Up-Target header which includes your .last_updated_on selector. But if this selector didn't exist in the original page HTML, Unpoly wouldn't know where to place the new value.

I'd suggest making a common selector that you could apply [up-hungry] to.

[LaundroMat]

The element outside the form does indeed exist on both pages being rendered, so [up-hungry] was the way to go. Thanks!

[triskweline]

Only submit when an input field loses focus using only unpoly selectors (and no custom JS)

You could auto-submit a form after a change event, targeting the .last_updated_on element outside the form:

<form up-autosubmit up-target=".last_updated_on" up-watch-event="change">
  <input type="text">
</form>

<div class=".last_updated_on"></div>

You can also target multiple fragments like this.

Or tell [up-validate] it should update a fragment outside of the form?

[up-validate] defaults to the current form group, but also accepts an arbitrary selector:

<form>
  <input type="text" up-validate=".last_updated_on">
</form>

<div class=".last_updated_on"></div>

Validations were designed for changes within a form before submission (to verify input or update dependent fields. I would go with [up-autosubmit] if you're meaning to submit the form and conclude that interaction.

[LaundroMat]

Even better! I just started with unpoly, so thanks for this.
Also, now it's even clearer which elements will be updated (one tends to forget about [up-hungry] elements).