I have a page with a mix of Login forms (modified versions of the standard Login and Lost Password forms) as well as a Formit contact form. These are all modal forms and I use some javascript to display them.
If I have an error on either of the Login forms I simply re-display the modals with the error messages highlighted. This is working fine.
Next I added the following Formit contact form:
<div>
<form class="login_form modal" id="request" style="display:none;" action="[[~[[*id]]]]" method="post">
<h3>Request Information</h3>
[[!+fi.error_message:notempty=`<p>[[!+fi.error_message]]</p>`]]
<input type="hidden" name="nospam:blank" value="" />
<p><label for="name">Name</label>
<span class="error">[[!+fi.error.name]]</span>
<input type="text" name="name" id="name" value="[[!+fi.name]]" /></p>
<p><label for="email">Email</label>
<span class="error">[[!+fi.error.email]]</span>
<input type="text" name="email" id="email" value="[[!+fi.email]]" /></p>
<p><label for="subject">Subject</label>
<span class="error">[[!+fi.error.subject]]</span>
<input type="text" name="subject" id="subject" value="[[!+fi.subject]]" /></p>
<p><label for="text">Message</label>
<span class="error">[[!+fi.error.text]]</span>
<textarea name="text" id="text" cols="55" rows="7" value="[[!+fi.text]]">[[!+fi.text]]</textarea></p>
<p><input type="submit" value="Send" /></p>
</form>
[[!+fi.validation_error:notempty=`<script>
$('#request').modal();
</script>`
]]
</div>
Tested in isolation, this error handler also works as expected. However, if the
[[!+fi.validation_error:notempty=`<script>
$('#request').modal();
</script>`
]]
above is present, it breaks the two Login forms. Now, if either of these forms contain an error, the Formit Contact modal is displayed instead of the Login form.
I can only assume that
fi.validation_error:notempty is firing for any error, not just the Formit errors. Is this the case, and if so, how do I get around this? (ideally I would want it to only fire for this form).