如何在表单提交上执行表单验证后执行ajax帖子?

时间:2014-10-25 22:26:28

标签: javascript jquery ajax post jquery-plugins

我有一个ajax post post,它在我的Rails应用程序中提交了一个联系表单。

function contact_email(e){
    form = $('form');
    $.ajax({
        type: "POST",
        url: form.attr('action'),
        data: form.serialize(),
        dataType: "JSON",
        async: false,
        success: function(data) {
            window.location = data.redirect_url;
        },
        error: function(xhr, status) {
            console.log(status);
        }
    });
    return false;
}

随附的html是:

<div class="form-container">
          <form name="contact_form" action="/contact" data-remote="true" class="forms" >
            <fieldset>
              <ol>
                <li class="form-row text-input-row name-field">
                  <input type="text" name="name" class="text-input defaultText required" title="Name (Required)"/>
                </li>
                <li class="form-row text-input-row email-field">
                  <input type="text" name="email" class="text-input defaultText required email" title="Email (Required)"/>
                </li>
                <li class="form-row text-input-row subject-field">
                  <input type="text" name="subject" class="text-input defaultText" title="Subject"/>
                </li>
                <li class="form-row text-area-row">
                  <textarea name="message" class="text-area required"></textarea>
                </li>
                <li class="form-row hidden-row">
                  <input type="hidden" name="hidden" value="" />
                </li>
                <li class="button-row">
                  <input onclick="contact_email()" type="submit" value="Submit" name="submit" class="btn btn-submit bm0" />
                </li>
              </ol>
              <input type="hidden" name="v_error" id="v-error" value="Required" />
              <input type="hidden" name="v_email" id="v-email" value="Enter a valid email" />
            </fieldset>
          </form>
        </div>

Jquery.slickforms用于在提交之前验证表单,它实质上检查是否填写了必填字段并对提供的电子邮件进行了正则表达式验证。 光滑表格由以下人员发起:

jQuery(document).ready(function ($) {
    $('.forms').dcSlickForms();
});

但是,在调试执行时,我的

onclick="contact_email()"
首先评估

并进行POST,并且仅在执行了slickforms验证之后。如果且仅在通过slickforms成功进行表单验证后,我如何才能使我绑定的contact_email()函数出现?

0 个答案:

没有答案