如何阻止表单在 Javascript 中提交？

Question

我有一个带有邮政编码和国家/地区自动填充功能的运输表单，但我想阻止用户在输入数据无效时提交表单。

function callPickupZipCurl(){

var zipval = $( "#pickupZipCode" ).val();
var type = "zipCountryCode";

//autocomplete
example("input#pickupZipCode").autocomplete({

       minLength:3,
       source: function(request, response) {
           example.ajax({
             url: '<?php echo get_template_directory_uri(); ?>/search-form/curldata.php', 
             dataType: 'json',
             data: { zipval : zipval , type:type},
             success: function(result) {
                  response(result);                   
             }
           });
       },

        select: function( event, ui ) {
            example( "#pickupZipCode" ).val( ui.item.value );
            example( "#postal_hid_data" ).val( ui.item.id );
            return false;
        }
});             

};


//get zipcode field value
            $( "#pickupZipCode" ).keyup(function( event ) {
                var zipval = $( "#pickupZipCode" ).val();   
                    if (zipval.length > 2) {                
                            callPickupZipCurl();
                    }
            }); 




            //get destination port value
            $( "#destPort" ).keyup(function( event ) {
                var desval = $( "#destPort" ).val();
                    if (desval.length > 2) {                        
                        callDestinationCurl();
                    }                   
            });



//submit code
    $( "#cust_form_submit" ).click(function( event ) {

        if($("input:radio[name='shipment']").is(":checked")) {
            $('#shipmentError').html('');
        }   
        else{
            $('#shipmentError').html('');
            $("#shipmentError").html(' &nbsp;Este campo es obligatorio.');
            return false;
        }

        if($("input:radio[name='load']").is(":checked")) {
            $('#loadError').html('');
        }   
        else{
            $('#loadError').html('');
            $("#loadError").html(' &nbsp;Este campo es obligatorio.');
            return false;
        }

        if($("input:radio[name='load']").is(":checked")) {
            var load_val = $('input:radio[name=load]:checked').val();
                if(load_val=="lcl"){
                        var lcl_weight = $( "#lcl_weight" ).val();
                        var lcl_volume = $( "#lcl_volume" ).val();

                        if(lcl_weight==""){
                            $('#lcl_weightError').html('');
                            $("#lcl_weightError").html('&nbsp; Obligatorio.');
                            $("#lcl_weight").focus();
                            return false;
                        } else { $('#lcl_weightError').html(''); }
                        if(lcl_volume==""){
                            $('#lcl_volumeError').html('');
                            $("#lcl_volumeError").html('&nbsp; Obligatorio.');
                            $("#lcl_volume").focus();
                            return false;
                        } else { $('#lcl_volumeError').html(''); }
                }
        }   


        if($("input:radio[name='pickup']").is(":checked")) {
            $('#pickupError').html('');
        }   
        else{
            $('#pickupError').html('');
            $("#pickupError").html(' &nbsp;Este campo es obligatorio.');
            return false;
        }



        var postalnew = $( "#postal_hid_data" ).val();
        var desnew = $( "#des_hid_data" ).val();
        var postal = $( "#pickupZipCode" ).val();
        var choosePort = $( "#choosePort" ).val();
        var choosePortOther = $( "#choosePortOther" ).val();
        var des = $( "#destPort" ).val();

        var pickup_val = $('input:radio[name=pickup]:checked').val();
        var load_val = $('input:radio[name=load]:checked').val();

            if(pickup_val=="yes"){
                    if(postal==""){
                            $('#zipError').html('');
                            $("#zipError").html('Este campo es obligatorio.');
                            $("#pickupZipCode").focus();
                            return false;
                    } else{ $('#zipError').html(''); }
            }

            if(pickup_val=="no"){

                if(load_val=="lcl"){
                    if(choosePortOther==""){
                            $('#zipError').html('');
                            $("#zipError").html('Este campo es obligatorio.');
                            $("#choosePortOther").focus();
                            return false;
                    } else{ $('#zipError').html(''); }
                }
                else{
                    if(choosePort==""){
                            $('#zipError').html('');
                            $("#zipError").html('Este campo es obligatorio.');
                            $("#choosePort").focus();
                            return false;
                    } else{ $('#zipError').html(''); }
                }

            }


            if(des==""){
                    $('#desError').html('');
                    $("#desError").html('Este campo es obligatorio.');
                    $("#destPort").focus();
                    return false;
            } else{ $('#desError').html(''); }



        var shipment_val = $('input:radio[name=shipment]:checked').val();
        if(load_val=="fcl"){

            if(pickup_val=="no"){
                var postalnew = $( "#choosePort" ).val();
            }   

            if(shipment_val=="export"){
            //www.odesk.com  Export
            window.location = "http://www.icontainers.com/ver-tarifas/FCL/"+postalnew+"/"+desnew;
            }
            if(shipment_val=="import"){
            //www.odesk.com Import
            window.location = "http://www.icontainers.com/ver-tarifas/FCL/"+desnew+"/"+postalnew;   
            }

        }
        if(load_val=="lcl"){
            var lcl_weight = $( "#lcl_weight" ).val();
            var lcl_volume = $( "#lcl_volume" ).val();
            var lcl_volume = lcl_volume.replace(",",".");
                if(pickup_val=="no"){
                    var postalnew = $( "#choosePortOther" ).val();
                }


            if(shipment_val=="export"){
            //www.odesk.com Export
            window.location = "http://www.icontainers.com/ver-tarifas/LCL/"+postalnew+"/"+desnew+"/"+lcl_volume+"/"+lcl_weight;
            }
            if(shipment_val=="import"){
            //www.odesk.com Import
            window.location = "http://www.icontainers.com/ver-tarifas/LCL/"+desnew+"/"+postalnew+"/"+lcl_volume+"/"+lcl_weight;
            }               


        }

        return false;

    });

现在我有它，所以在邮政编码或国家/地区表格中没有输入会发出警报“Este campo es obligatorio”。

但是现在代码在哪里，如果您在任一表单中输入随机文本并提交，它将带您进入 404 页面。

Answer 1

通过服务器进行 jQuery 或 JavaScript 浏览器表单/输入验证或 Php 验证。各有利弊。