Question

我有一个按钮类型=“提交”提交的表单，当我点击它时，它启动前端验证，但我也有一些服务器验证，我必须与ajax。例如，该名称不被他人使用。

我的问题是，如果我改为按钮类型=“按钮”，前端验证不会执行。只有ajax验证才能做到。我能做什么？ P / D：我使用类似于jquery的tiny.js进行js事件。

HTML

<form>
  <input name="name" class="name">
  <button type="submit" class="name__valid" value="save">save</button>
<form>

JS

tiny.ajax("/update",
    {
        method: "PUT",
        data: {
            name: document.querySelector('name__valid').value;
        },
        dataType: "json",
        success: function (data) {
            alert('available name');
            window.location = "/home?name-update=success"
        },
        error: function (error) {
            //example: used name error
            var errorJSON = JSON.parse(error.response);

            console.log('Messages ' + errorJSON.messages);
        }
    }
);

//this validation only it's executed by de button (type submit)
var name = new ch.Validation(ch('.name__valid')[0], {
    'conditions': [{
        'name': 'invalid-name',
        'message': 'this name it's not valid'
    }]
});

Answer 1

您希望在提交表单时使用event.preventDefault。

document.querySelector('form').onsubmit = function(e) {
  e.preventDefault();
  // Do your Ajax request after.
}

On JSBin

Answer 2

我认为防止自动提交表单的最佳方法如下：

<form onsubmit="alert('Replace the alert with any validation code');return false;">
  <input name="name" class="name">
  <button type="submit" class="name__valid" value="save">save</button>
<form>

当在输入字段中按回车键时单击按钮AND时，表单上的事件处理程序将处理。使用Ajax验证替换警报函数调用，但请确保保留return false;语句，以防止自动发布表单。

js - 阻止表单提交

2 个答案: