Ajax在移动和触摸屏设备上工作异常

Question

我的应用程序中有一个动态表单，可以实时编辑（添加或删除输入字段），但是当用户犯了一些错误并且没有正确填写某些内容时，我在验证时遇到了问题，所有新添加的字段都会消失，这非常不好，因为用户必须重新创建以前的所有内容。

因此，为了解决该问题，我创建了一个ajax调用，仅用于检查验证是否正确：

// send ajax first to check validation so that the dynamic fields don't disappear
$(document).on('touchstart mousedown', ':submit', function() {
    $('input[name="items"]').val($('.item').length);
    var form = $("form");
    var myMethod = '';
    var myRoute = '';
    var orderId = "<?php if (isset($order->id)) { echo $order->id; } else { echo false;} ?>";

    if( $(this).val() === 'Make new order' && !orderId){
        myMethod = 'post'
        myRoute = '/orders'

    } else {
        myMethod = 'post';
        myRoute = '/orders/edit/' + orderId;
    }

    $.ajax({
        type: myMethod,
        url: myRoute,
        headers: { 'X-CSRF-TOKEN': "{{csrf_token()}}" },
        data: form.serializeArray(),
        dataType: 'json',
        success: function(data){
            console.log('validation success!');
        },
        error: function(data) {
            var errors = data.responseJSON;
            var errorsArr = [];
            for (error in errors) {
                errorsArr.push(errors[error][0]);
            }
            bootbox.alert(errorsArr.join("<br>"));
            console.log(errors);

        }
    });
});

在我的控制器中，我有这个：

public function store(OrdersForm $request)
{
    if($request->ajax()){ 

        return response()->json();

    } else {

        // save all...
    }
}

问题是所有这些东西在计算机上都可以正常工作，但是我收到了用于创建和编辑提交的验证消息，但是在平板电脑和手机上，所有疯狂的事情都在发生...

我在创建和编辑时遇到双重验证错误，我得到验证消息只是短暂的，它消失了，我不知道该在哪里调试...我如何查看手机上正在发生什么？

Answer 1

您的代码之所以这样触发是因为您需要将Submit按钮更改为常规按钮，然后在您发送的AJAX请求检查验证成功返回时手动触发表单提交。