Question

下面的代码应该修改提交按钮的美观和功能：

    $('[data-image-upload-button]').click(function(){
      if ($('[data-product-image-input]')[0].files.length > 0) {
        $('[data-product-image-input]').remove()
        $(this).prop('disabled', true)
        $(this).text('Uploaded!')
        $(this).removeClass('btn-outline-primary')
        $(this).addClass('btn-outline-success')
      }
    })

但是，当我单击按钮时，将执行此代码，但不会提交表单。我故意不使用preventDefault()，因为我希望提交表单以及执行此js块。

我尝试在submit事件而不是click上触发此功能，但这会产生invalid_authenticity_token错误。

我也尝试在函数内部调用submit()，但是由于表单是多部分的，因此无法正常工作。

我在做什么错了？

Answer 1

看起来像这两行

const fs = require('fs');
const path = require('path');

let schema;
let lastUpdate = 0;

// Assumes your file exists and is correctly json-formatted
// You should add some error handling
// This might also need to be tweaked if you want it to work in an asynchronous way
function check(theThingsToValidate) {
    let jsonPath = path.resolve(__dirname, 'data.json');
    let fileStats = fs.statSync(jsonPath);
    if (!schema || fileStats.mtimeMs > lastUpdate) {
        lastUpdate = fileStats.mtimeMs;
        let fileData = JSON.parse(fs.readFileSync(jsonPath, 'utf8'));
        schema = Joi.object().keys({
            'foo': Joi.array().unique().items(
                ...Object.keys(fileData).map(key => ({
                    id: key,
                    name: fileData[key]
                }))
            )
        });
    }

    return Joi.validate(theThingsToValidate, schema);
}

是在触发默认按钮行为（表单提交）之前执行的，因此输入不包含在表单中。

最终我的解决方案是将事件处理程序添加到按钮和输入中，以防止在表单提交后单击，就像这样：

$('[data-product-image-input]').remove()
$(this).prop('disabled', true)

jQuery事件处理程序阻止我的表单提交

1 个答案: