js-防止表单提交

Question

我有一个由type =“ submit”按钮提交的表单，当我单击它时，它将启动前端验证，但是我也有一些与ajax有关的服务器验证。 例如，该名称未被其他人使用。

我的问题是，如果我更改为button type =“ button”，则不会执行前端验证。 只有ajax验证才能执行此操作。 我能做什么？ P / D：我使用tiny.js类似于js事件的jquery。

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 。

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> 

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