如果验证未通过，如何不提交表单答案

【问题标题】：how don't submit form if validation not passed如果验证未通过，如何不提交表单
【发布时间】：2015-03-01 21:00:24
【问题描述】：

我写了一个小代码sn-p：

html:

<label for="searchTextField">Please Insert an address:</label>
<br>
<form id = "formId" action="google.com">
    <input id="searchTextField" type="text" size="50">
    <input type="submit" value="is valid" id="submitId">
<form>

js:

var input = document.getElementById('searchTextField');
var options = {componentRestrictions: {country: 'us'}};

new google.maps.places.Autocomplete(input, options);
$("#formId").submit(function(e){
    return editTerminal(e);
});
function editTerminal(id, e) {
            function setPosition(){
                console.log("logic");            
            };
            return codeEditAddress(setPosition,e);
}      

 function codeEditAddress( callback, e) {
        var address = document.getElementById('searchTextField').value;
        var geocoder= new google.maps.Geocoder();
        geocoder.geocode({ 'address': address}, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                //should be submit
                alert('good address');
            } else {
                //should NOT be submit
                alert('wrong address');
                e.preventDefault();

            }
    });
 }

jsfiddle DEMO

现在我的表单仍然提交。如果显示wrong address 消息，我想实现它不提交。

请帮忙修改代码。

【问题讨论】：

标签： javascript jquery forms submit form-submit

【解决方案1】：

而不是调用你的函数

$("#formId").submit(function(e){
return editTerminal(e); });

在表单提交时，您应该用一个按钮替换您的提交输入，并在它的 onclick 事件上启动您的函数。然后，如果地址有效，请手动提交表单：

$("#formId").submit();

S.P

【讨论】：

他们的问题是在表单字段上按 Enter 也会提交表单。

【解决方案2】：

您的地理编码功能是异步的。您在其中所做的任何事情都不会影响事件处理。

我只会为提交事件返回 false

$("#formId").submit(function(e){
    editTerminal(e);
    return false;
});

并且做一个纯js表单提交一个好的地址绕过提交监听：

document.myForm.submit();

http://jsfiddle.net/6pmou2zx/1

【讨论】：