js - 防止表单提交

Question

我收到了一个由按钮 type="submit" 提交的表单，当我单击它时，它会启动前端验证，但我也有一些与 ajax 相关的服务器验证。例如，另一个人没有使用它的名字。

我的问题是，如果我更改为 button type="button" 前端验证不会执行。只有 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.
}

在 JSBin 上。