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

Question

我写了一小段代码：

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 消息，我想实现它不提交。

请帮忙修改代码。

Answer 1

而不是调用你的函数

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

在提交表单时，您应该将提交输入替换为按钮，并在它的 onclick 事件上启动您的功能。然后，如果地址有效，请手动提交表格：

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

S.P

Answer 2

您的地理编码函数是异步的。您在其中所做的任何操作都不会影响事件处理。

对于提交事件，我总是return false

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

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

document.myForm.submit();

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

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

how don't submit form if validation not passed

javascript

forms

jquery

submit

form-submit

jsfiddle DEMO