0

I'm creating a registration form with flask jinja and wtforms but I'm having trouble updating the fields' placeholders when a validation error is raised.

At the moment my code looks something like this:

<div class="container">
    {{ form.fieldA(placeholder="ph1") }}
    {{ form.fieldB(placeholder="ph2") }}
    {{ form.fieldC(placeholder="ph3") }}
</div>

{% for field, message in form.errors.items() %}
<style>
    #{{ field }} {
        box-shadow: inset 0 0 2px red, 0 0 4px red;
    }
</style>
<script type="text/javascript">
    let clean_message = "{{ message }}";
    clean_message = clean_message.slice(6, -6);
    document.getElementById("{{ field }}").placeholder = clean_message;
</script>
{% endfor %}

The issue is that only the first placeholder gets changed, the following ones keep their original placeholder. I'm quite new to fullstack development so I'm not sure if this is a fronted/backend JS/Jinja timing issue.

I should also add that on the browser the scripts seem to be understood correctly: clean_message matches the field's error message.

P I N C O
  • 76
  • 2
  • 11
  • Are you getting js console errors with the `let clean_message` line about how `clean_message` is already defined? – xdhmoore May 11 '20 at 00:22
  • I suspect it's due to the "Redeclaration" stuff mentioned here: https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var#11444416 – xdhmoore May 11 '20 at 00:24
  • I'm not getting any errors but I came to the same conclusion. – P I N C O May 11 '20 at 07:18

1 Answers1

1

var clean_message solves the issue, I'm not sure why, I will investigate.

P I N C O
  • 76
  • 2
  • 11