jQuery验证无法正常工作

Question

我只是jQuery的新手。现在我正在尝试使用表单的验证方法，但我发现页面不会停在那里显示错误消息，而不是显示消息2秒，然后提交数据并重新加载页面。

我的HTML代码：

<form class="plform" id="pricelistform" method="get" action="" enctype="multipart/form-data">
<fieldset>
    <div id="add_item" class="overlay">
        <div class="popup">
            <h2 class="div_title">Add Item</h2>
            <a class="close" href="#">&times;</a>
            <hr class="heading_divide">
            <div class="content">
                <div class="control-group">
                    <div class="col-xs-12 col-sm-3">
                        <div class="control-label">
                            <label id="supply_search-lbl" for="supply_search" class="hasTooltip" title="" data-original-title="<strong>Existing Supplier</strong>Please select an existing supplier<br/>">Existing Supplier</label>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-9">
                        <div class="controls">
                            <select name="supplyerid[]" id="supply_search" class="input-medium form-control">
                                <option value="-1"><?php echo JText::_('--- Select Supplier ---');?></option>                                   
                                <?php echo JHtml::_('select.options', JFormFieldSelect::getSupplier(),'id', 'companyname', $this->escape($this->state->get('filter.supply_search')));?>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <div class="con-xs-12 col-sm-3">
                        <div class="control-label">
                            <label id="product_name-lbl" for="product_name">Product Name<span class="star">&nbsp;*</span></label>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-9">
                        <div class="controls">
                            <input type='text' name='productname[]' id="product_name" class="required form-control" aria-required="true"/>
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <div class="con-xs-12 col-sm-3">
                        <div class="control-label">
                            <label id="product_code-lbl" for="product_code">Product Code</label>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-9">
                        <div class="controls">
                            <input type='text' name='productcode[]' id="product_code" class="form-control"/>
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <div class="con-xs-12 col-sm-3">
                        <div class="control-label">
                            <label id="cost_price-lbl" for="cost_price">Cost Price<span class="star">&nbsp;*</span></label>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-9">
                        <div class="controls">
                            <input type='text' name='costprice[]' id="cost_price" class="form-control" />
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <div class="con-xs-12 col-sm-3">
                        <div class="control-label">
                            <label id="sell_price-lbl" for="sell_price">Sell Price<span class="star">&nbsp;*</span></label>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-9">
                        <div class="controls">
                            <input type='text' name='sellprice[]' id="sell_price" class="form-control" />
                        </div>
                    </div>
                </div>
                <div class="buttons">
                    <button type="submit" class="gs-btn-2 additem" id="add_btn">Add</button>
                </div>      
            </div>
        </div>              
    </div>  
</fieldset></form>

jQuery的：

$(document).ready(function(){

//close add item popover
    $('.close').click(function(){
        e.preventDefault();
        $('.overlay','#add_item').hide();   
    });

    //click button "Add" in add item popover        
    $(".additem").on('click', function(){

    var temp={
        productname: pname.val(),
        productcode: pcode.val(),
        costprice: cprice.val(),
        sellprice: sprice.val(),
        accountid: accid.val(),
        warranty: warraty.val(),
    };

    //console.log(temp);
    $.ajax({
        type:'post',
        url:'index.php?option=com_gsprlist&task=additem.addItem',
        data:{data:temp},
        success:function(re){
            //console.log(re);
            $('.overlay').hide();

            },
            error:function(re){

                alert('error saving order');
            }
        });

    });
})

验证脚本：

$('#pricelistform').validate({
    rules:{
        'productname[]':{
            required:true,
            minlength:2 
        },
        'costprice[]':"required",
        'sellprice[]':"required",
        'indiname':"required",
        'comname':"required",
        'indiphone':"required",
        'indiemail':"required",
        'accid[]':"required",

    },
    messages:{
        'productname[]':{
            required:"Please enter your productname",
            minlength:" Your product name must consist of at least 2 characters"
        },
        'costprice[]':"Please enter your cost price",
        'sellprice[]':"Please enter your sell price",
        'accid[]':"Please enter your Account ID",
    }
}); 

Answer 1

为什么要使用更多的JavaScript .preventDefault()来解决如果您首先只使用正确类型的按钮元素而不会发生的问题？

将button更改为type="button"，并且不会触发submit事件。

<button type="button" class="gs-btn-2 additem" id="add_btn">Add</button>

Answer 2

尝试一下，我认为这样做

$(".additem").on('click', function(event){
event.preventDefault();
var temp={
    productname: pname.val(),
    productcode: pcode.val(),
    costprice: cprice.val(),
    sellprice: sprice.val(),
    accountid: accid.val(),
    warranty: warraty.val(),
};

//console.log(temp);
$.ajax({
    type:'post',
    url:'index.php?option=com_gsprlist&task=additem.addItem',
    data:{data:temp},
    success:function(re){
        //console.log(re);
        $('.overlay').hide();

        },
        error:function(re){

            alert('error saving order');
        }
    });

});