如果客户端表单验证 bypassed/disabled 如何只使用服务器端验证

Question

我正在使用 jQuery 验证 https://jqueryvalidation.org/documentation/2/

我正在使用 jQuery/ajax 进行服务器端验证作为备份。问题是服务器端首先验证。它只是一个备份，以防客户端验证被绕过等。除非需要，我怎样才能让它不工作？

<form id="supportForm">

$("#supportForm").validate({
        rules: {
            first_name: "required",
            last_name: "required",
            email: {
                required: true,
                email: true
            },
            mobile: {
                required: true,
                digits: true,
                minlength: 9
            },
            company: "required",
            'checkboxes[]': {required: true}   
        },
         messages: {
            first_name: "First name required",
            last_name: "Last name required",
            email: "Inalid email address",
            mobile: "Please enter only digits",
            company: "Company required",
            'checkboxes[]': "Select at least one service"
        }
});

    $('#consult').on('click', function(e) {
        e.preventDefault();
        var form = $('#supportForm').serialize();
        $.ajax({
            url: 'validate.php',
            type: 'POST',
            dataType: 'json',
            data: form,
            beforeSend: function() {
                $('.error-message').empty().hide();
                $('consult').prop('disabled', true);
                $('consult').val('Submitting...');

            }
        })
        .done(function (data) {
            if(!data.success) {
                $('.error-message').append(data.message).fadeIn();
                $('consult').prop('disabled', false);
                $('consult').val('Submit');


            } else {
                alert('success, process form');
            }
        })
         .fail(function (jqXHR, textStatus, errorThrown) {
            console.log(textStatus + ': ' + errorThrown);
            console.warn(jqXHR.responseText);
        });
    });

Answer 1

The problem is that the server side validation fires first.

这里的问题是您在提交表单之前没有验证您的表单。

jquery 验证表单提交中的挂钩，但您自己手动序列化表单（从而绕过浏览器提交）。

您需要在 $.ajax.

之前调用 jquery 验证 form.valid()

$('#consult').on('click', function(e) {
    e.preventDefault();

    if (!$('#supportForm').valid())
        return;

    var form = $('#supportForm').serialize();
    $.ajax({ ...

更多信息：https://jqueryvalidation.org/valid/

Answer 2

您不应为 Ajax 使用单独的 click 处理程序。该插件包含一个名为 the submitHandler 的选项，该插件已自动捕获点击。

Replaces the default submit. The right place to submit a form via Ajax after it is validated.

$("#supportForm").validate({
    rules: {
        ....   
    },
    messages: {
        ....
    },
    submitHandler: function(form) {
        $.ajax({
            url: 'validate.php',
            type: 'POST',
            dataType: 'json',
            data: $('#supportForm').serialize(),
            ....
        }
        return false;
    }
});

请注意，该函数的参数称为 form，因此请重命名该参数或重命名您的变量。也没有必要使用 .preventDefault();再次强调，因为插件已经为您处理好了。

如果客户端表单验证 bypassed/disabled 如何只使用服务器端验证

How to only use server side validation if client form validation bypassed/disabled

jquery

jquery-validate