Formit redirection to the page about successful sending

1

Hello. I ran into a problem. The form sends you to the page about the successful submission, although the verification was not passed

1111
11111366×645 86.1 KB

AjaxFormS

[[!AjaxForm?
  &form=`tpl.AjaxForm.example`
  &snippet=`FormIt`
  &hooks=`FormItSaveForm,email,rcv3`
  &emailSubject=`Новое сообщение с сайта [[++site_url]]`
  &emailTo=`site@site.com`
  &emailFrom=`site@site.ru`
  &emailTpl=`tpl.email`
   &validate=`nospam:blank,
    name:required,
    email:email:required,
    message:required:minLength=^20^,
    phone:required,
    soglasie:required`
  &validationErrorMessage=`В форме содержатся ошибки!`
  &successMessage=`<h2>Сообщение успешно отправлено</h2>`
]]
[[!+fi.successMessage]]

Code in the template

	<script>
$(document).on('af_complete', function(event, response) {
    var form = response.form;
    if (form.attr('id') == 'f1') {
       window.location.href = "[[~31]]"
    }
});
</script>

tpl.AjaxForm.example

<form id="f1" action="" method="post" class="default-form">
<div class="row clearfix">
<input type="hidden" name="pagetitle" value="[[*pagetitle]]">
<div class="col-lg-6 col-md-6 col-sm-12 form-group">
        <label class="control-label" for="af_name">[[%af_label_name]]</label>
        <div class="controls">
            <input type="text" id="af_name" name="name" value="[[+fi.name]]" placeholder="" class="form-control"/>
            <span class="error_name">[[+fi.error.name]]</span>
        </div>
    </div>

    <div class="col-lg-6 col-md-6 col-sm-12 form-group">
        <label class="control-label" for="af_email">[[%af_label_email]]</label>
        <div class="controls">
            <input type="email" id="af_email" name="email" value="[[+fi.email]]" placeholder="" class="form-control"/>
            <span class="error_email">[[+fi.error.email]]</span>
        </div>
    </div>
 <div class="col-lg-6 col-md-6 col-sm-12 form-group">
 <label class="control-label" for="af_phone">Телефон</label>
        <div class="controls">
            <input type="text" id="af_phone" name="phone" value="[[+fi.phone]]" placeholder="" class="form-control"/>
            <span class="phone">[[+fi.error.phone]]</span>
        </div>
                                    </div>
    <div class="col-lg-6 col-md-6 col-sm-12 form-group">
        <label class="control-label" for="af_message">[[%af_label_message]]</label>
        <div class="controls">
            <textarea id="af_message" name="message" class="form-control" rows="5">[[+fi.message]]</textarea>
            <span class="error_message">[[+fi.error.message]]</span>
        </div>
    </div>
	<div class="col-lg-12 col-md-12 col-sm-12 form-group message-btn centred">
        									<span class="error">[[!+fi.error.soglasie]]</span>
<label class="custom-control material-checkbox"><input type="checkbox" class="material-control-input" value="" name="soglasie[]" x>
        <input type="checkbox"  name="soglasie[]" value="согласие" [[!+fi.soglasie:FormItIsChecked=`soglasie`]] onclick="showHide('soglasie-input')">
        <span class="description"> С условиями <a href="[[~17]]" target="_blank" title="Ознакомтесь с Согласие на обработку персональных данных"> ознакомлен и даю свое согласие.*</a></span></label>
    </div>
	 <div class="col-lg-12 col-md-12 col-sm-12 form-group message-btn centred">
        <div class="controls">
            <button type="reset" class="theme-btn style-one">[[%af_reset]]</button>
        </div>
    </div>
<div class="col-lg-12 col-md-12 col-sm-12 form-group message-btn centred">
<button type="submit" class="theme-btn style-one">[[%af_submit]]</button>
</div>
    

    [[+fi.success:is=`1`:then=`
    <div class="alert alert-success">[[+fi.successMessage]]</div>
    `]]
    [[+fi.validation_error:is=`1`:then=`
    <div class="alert alert-danger">[[+fi.validation_error_message]]</div>
    `]]
	 </div>
	 [[!rcv3_html? &action=`[[+rcv3Action:default=``]]` &error=`[[+fi.error.g-recaptcha-response]]`]]

</form>
2

In your javascript code you have to check first, if there was an error, before redirecting with window.location.href.

Maybe something like this works, but you have to check what exactly is returned by AjaxForm.

if (form.attr('id') == 'f1' && response.success) {
   window.location.href = "[[~31]]"
}
1 Like
3

thanks. fixed everything