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

Question

I have a dynamic form in my app that can be live edited (adding or removing input fields) but i had a problem on validation when user made some mistake and didn't fill something right all new added fields would be gone and that was very bad because the user had to recreate everything how he had it before.

So to solve that problem i have created an ajax call just to check if validation is fine:

// 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);

        }
    });
});

and in my controller i have this:

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

        return response()->json();

    } else {

        // save all...
    }
}

And the problem is that all works fine on the computer i get the validation messages for both create and edit submits but on tablet and mobile phones all crazy things going on...

I get double validation error on create and on edit i get validation message briefly and it goes away i don't know where to debug this...how can i see what is happening on mobile phone?

Answer 1

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