Question

这是我的HTML

            <div><center><b class="cust_heading">ONLINE FREIGHT QUOTES</b><br>
Instant prices with multiple carriers</center>
            </div>

            <div class="field_heading"><b>Shipment type* </b><span id="shipmentError" class="cust_error"></span></div>
            <div class="fiftyPercent">
                <input type="radio" name="shipment" value="export"> Export
            </div>
            <div class="fiftyPercent">
                <input type="radio" name="shipment" value="import"> Import
            </div>

            <div class="field_heading"><b>Load type* </b><span id="loadError" class="cust_error"></span></div>
            <div class="fiftyPercent">
                <input type="radio" name="load" value="fcl"> FCL
            </div>
            <div class="fiftyPercent">
                <input type="radio" name="load" value="lcl"> LCL
            </div>


            <div style="display:none; width:100%;" id="weight_volume_row">
                <div class="fiftyPercent">
                Weight (kg)*<span id="lcl_weightError" class="cust_error"></span><br><input type="text" name="lcl_weight" id="lcl_weight" value="" placeholder="e.g 100" style=" width:70%;">
                </div>
                <div class="fiftyPercent"> 
                Volume (m<sup>3</sup>)*<span id="lcl_volumeError" class="cust_error"></span><br><input type="text" name="lcl_volume" id="lcl_volume" placeholder="e.g 1" value="" style=" width:70%;">
                </div>
            </div>


            <div class="field_heading"><b id="cust_include_text">Include pickup* </b><span id="pickupError" class="cust_error"></span></div>
            <div class="fiftyPercent">
                <input type="radio" name="pickup" value="yes"> Yes
            </div>
            <div class="fiftyPercent">
                <input type="radio" name="pickup" value="no"> No
            </div>



            <div class="field_heading"><b id="cust_zipcode_text">Pickup zip code* </b></div>

            <div style="width:100%;">
                <input id="pickupZipCode" placeholder="Enter a city or zip code" title="pickupZipCode" type="text" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" style=" width:85%;"><input type="hidden" name="postal_hid_data" id="postal_hid_data" value="">
                <select name="choosePort" id="choosePort" style=" width:85%; display:none;"><option disabled="disabled" selected="selected" value="">Choose a port</option><option value="test1">test1</option><option value="test2">test2</option><option value="test3">test3</option></select>
                <select name="choosePortOther" id="choosePortOther" style=" width:85%; display:none;"><option value="">Choose a port</option><option value="test4">test4</option><option value="test5">test5</option><option value="test6">test6</option></select>
                <span id="zipError" class="cust_error"></span>
            </div>



        <div class="field_heading"><b id="cust_dest_text">Port of destination* </b></div>

            <div style="width:100%;padding:5px 0px;">
                <input id="destPort" placeholder="Enter a port or country" title="portDestination" type="text" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" style=" width:85%;"><input type="hidden" name="des_hid_data" id="des_hid_data" value="">
        <span id="desError" class="cust_error"></span>
            </div>


        <div style="width:90%; float:left;padding:5px 0px;">
            <input class="searchButton orange-bttn cust_btn" id="cust_form_submit" name="cust_form_submit" type="submit" value="Buscar Naviera" style="float:right;">
        </div>  



                    </div>

我的jquery验证表单看起来像这样，它做错了什么。使用错误的表单ID？

$(function() {
$('cust_main_box').validate({
    rules: {
        pickupZipCodeUS: {
            required: true
        },
        destPortUS: {
            required: true
        },
        //lcl_weightForm2US: {
            //required: true
        //},
        //lcl_volumeForm2US: {
            //required: true
        //},
    },
    messages: {
        pickupZipCodeUS: {
            required: 'Please enter a valid zip-code',
        },
        destPortUS: {
            required: 'Please enter a valid port',
        },
        //lcl_weightForm2US: {
            //required: 'Please enter a valid weight',
        //},
        //lcl_volumeForm2US: {
            //required: 'Please enter a valid volume',
        //},
    }
)};

}）;

注释掉的代码与jquery中的另一个表单有关，我想在我弄清楚它做错的时候包含它。

Answer 1

正如@undefined已经告诉过你的那样，元素应该是.cust_main_box或#cust_main_box，但代码中的问题是验证结束：

)};

应该是

});

所以你正确的JS：

$(function() {
    $('#cust_main_box').validate({
        rules: {
            pickupZipCodeUS: {
                required: true
            },
            destPortUS: {
                required: true
            }
            //,lcl_weightForm2US: {
                //required: true
            //},
            //lcl_volumeForm2US: {
                //required: true
            //},
        },
        messages: {
            pickupZipCodeUS: {
                required: 'Please enter a valid zip-code'
            },
            destPortUS: {
                required: 'Please enter a valid port'
            }
            //,lcl_weightForm2US: {
                //required: 'Please enter a valid weight',
            //},
            //lcl_volumeForm2US: {
                //required: 'Please enter a valid volume',
            //},
        }
    });
});

Answer 2

您的主要问题：

1）jQuery Validate插件要求所有要验证的输入元素必须具有name属性。这些name属性也必须是您声明的规则所在的位置。

<input type="text" name="pickupZipCodeUS" ...
<input type="text" name="destPortUS" ...

2）您缺少form元素。只有当用户输入元素包含在一组<form></form>标记中时，jQuery Validate插件才能工作。

3）$('cust_main_box')在此上下文中不是有效的选择器。将新<form>元素设为id="cust_main_box"，然后将选择器更改为$('#cust_main_box')。

<form id="cust_main_box" ...

4）.validate()来电的结束括号相反。它们应该是这样的：})。

$('#cust_main_box').validate({
    // rules & options
}); // <-- this here

工作代码：

$(function () {
    $('#cust_main_box').validate({
        rules: {
            pickupZipCodeUS: {  // <-- this is the field name
                required: true
            },
            destPortUS: {       // <-- this is the field name
                required: true
            }
        },
        messages: {
            pickupZipCodeUS: {
                required: 'Please enter a valid zip-code',
            },
            destPortUS: {
                required: 'Please enter a valid port',
            }
        }
    });
});

工作演示：http://jsfiddle.net/fTwsG/

您使用了大量无效且已弃用的标记，因此您还应将HTML放在W3C HTML Validation tool之内。

我如何用jquery验证这个表单？

2 个答案: