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

how don't submit form if validation not passed

本文关键字：表单 提交 何登 验证 如果      更新时间：2023-09-26

我写了一个小代码片段：

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演示

现在我的表格还是提交了。如果显示wrong address消息，我想实现它不提交。

请帮助修改代码。

而不是调用函数

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

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

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

S.p

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

对于提交事件，我总是返回false

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

并为一个好的地址做一个纯js表单提交，以绕过提交侦听器：

document.myForm.submit();

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

相关文章：