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

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

现在我的表单无论如何都会提交。我想实现的是，如果显示错误地址消息，它不会提交。

请帮忙修改代码。

Answer 1

而不是调用你的函数

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

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

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

S.P