如何在使用LiveValidation库时停止发送AJAX调用

Question

如果有任何字段出错，LiveValidation会阻止触发表单操作，但不会停止ajax调用。

所以我想做一些类似的事情：

if (field1.passValidation) {
     ajax_call();
}

这是代码(用西班牙语编写)：

$('.reporta').click(function() {//.reporta is the submit field of the form
    var motivo = $('#reportar select').val();
    var razon = $('#reportar textarea').val();
    reportar(v_id, motivo, razon); //Ajax call
});

//creation of LiveValidation object 
var reporte_f1 = new LiveValidation('reporte_f1', {validMessage: " ", wait: 300});
reporte_f1.add(Validate.Presence, {failureMessage: "Por favor, escriba un motivo"});

<form action="#">
<table>
    <tr><td><label for="reporte_f1">Motivo del reporte:<br /></label><textarea id="reporte_f1" rows="7" cols="50"></textarea></td></tr>
</table>
<div>
    <input type="submit" class="reporta" value="Reportar" /> 
</div>
</form>

通过这种方式，如果字段没有通过LiveValidation，则无论如何都会发送表单。

Answer 1

回答

HTML

<form action="#">
    <table>
        <tr>
            <td>
                <label for="reporte_f1">Motivo del reporte:
                    <br />
                </label>
                <textarea id="reporte_f1" rows="7" cols="50"></textarea>
            </td>
        </tr>
    </table>
    <div>
        <input type="submit" class="reporta" value="Reportar" />
    </div>
</form>

JS

function reportar(v_id, motivo, razon) {
    $('.reporta').html('<img src=\"img/cargando2.gif\" width=\"30px\" height=\"30px\"/>');
    $.ajax({
        url: "forms.php?form=10",
        data: {
            v_id: v_id,
            motivo: motivo,
            razon: razon
        },
        type: "POST",
        success: function (response) {
            $(".reportar[rel]").overlay().close();
            $('#dialogo').fadeIn(250);
            $('#dialogo').html("<ul><li class='ack'>El reporte ha sido enviado correctamente</li></ul>");
            setInterval(function () {
                $('#dialogo').fadeOut(400);
            }, 3000);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("Ha ocurrido un error al cargar los datos");
        }
    });
}

$(function () {
    $('.reporta').click(function () { //.reporta is the submit field of the form
        var motivo = $('#reportar select').val();
        var razon = $('#reportar textarea').val();
        reportar(v_id, motivo, razon); //Ajax call
    });

    //creation of LiveValidation object 
    var reporte_f1 = new LiveValidation('reporte_f1', {
        validMessage: "Gracias!",
        wait: 300
    });
    reporte_f1.add(Validate.Presence, {
        failureMessage: "Por favor, introduzca algo"
    });
    //The regex pattern here has to be matched
    reporte_f1.add(Validate.Format, 
              { pattern: /^\w+$/i, failureMessage: "Por favor, introduzca un mensaje válido" } );
});

便笺

我通过查看下面的example发现了这一点。

也取自下面的example

实例化LiveValidation对象时，如果发现它是form的子级，它会自动将自己附加到form的submit事件，因此在提交时，将自动对其中的所有LiveValidation对象执行验证。如果任何验证失败，它将停止表单提交(当然，这只在用户的浏览器中打开javascript时才起作用，所以一定要在服务器上做一些验证！)还可以在创建LiveValidation对象时将onlyOnSubmit选项指定为true，使其仅在提交表单时进行验证。下面的示例演示了这一点。另请注意，电子邮件字段不会验证它是否存在，因此，如果表单中未填写此字段，该字段仍将有效，因为它将被视为可选字段。在这个例子中，如果结果是有效的，那么结果将被覆盖，因为这个页面没有地方提交--它不会提交，而是会警告它是有效的，在现实生活中，如果有效，它只会继续提交。