我正在进行表单验证，其中有一些输入字段和选择框。
问题是，当我点击提交按钮时，它无法在第一次点击时调用验证功能，但是当我第二次点击时，编译器能够调用验证并返回true并且我的表单得到验证代码如下： -
JS代码
function validateOnSubmit(){
$('form[data-validate="parsley"]').each(function () {
if($(this).parsley().validate()) {
validated = true;
}
});
}
HTML代码
<form id="billPaymentSubmit" name="billPaymentSubmit" data-validate="parsley" autocomplete="off" onkeypress="if(event.keyCode==13) { return false; };" action="" method="POST">
<div class="form-group">
<div class="rows p-n">
<div class="col-lg-12 m-sm" id="quickPayOption">
<label class="text-xs font-bold"> <span class="">* QUICK PAY OPTIONS
</span>
</label>
</div>
</div>
<div class="rows p-n">
<div class="col-lg-3 checkbox i-checks m-n ">
<label class="radio m-r-lg" for="quickPayOption_J">
<input id="quickPayOption_J" name="bill.quickPayOpted" class="input-panel" onclick="setQuickPayOption(this)" type="radio" value="0">
<i></i>
<span class="">JomPay
</span>
</label>
</div>
<div class="col-lg-6 checkbox i-checks m-n">
<label class=" radio m-r-lg" for="quickPayOption_O">
<input id="quickPayOption_O" name="bill.quickPayOpted" class="input-panel" onclick="setQuickPayOption(this)" type="radio" value="1" checked="checked"> <i></i>
<span class="">Other Payments
</span>
<br>
<span class="text-xs">(Other billers - Credit cards/Loans/Mobile prepaid)
</span>
</label>
</div>
<hr width="100%">
<div class="clearer"></div>
</div>
</div>
<!-- ************************ other payment start *******************-->
<div class="form-group" id="otherPaymentDiv">
<div class="rows p-n">
<div class="col-lg-6 cols">
<div class="m-sm">
<label class="text-xs font-bold"> <span class="">* BILLING ORGANIZATION
</span>
</label> <br>
<div class="select2-container parsley-validated parsley-success" id="s2id_billerOrg" title="" style="width: 100%;"><a href="javascript:void(0)" class="select2-choice" tabindex="-1"> <span class="select2-chosen" id="select2-chosen-2">CELCOM ACCESS mobileReload</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a><label for="s2id_autogen2" class="select2-offscreen"></label><input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-2" id="s2id_autogen2"></div><select id="billerOrg" name="payeeCode" class="parsley-validated select2-offscreen parsley-success" style="width:100%;" data-required="true" onchange="e2esubmit(true,'/2FA/processEnquiry.do?token=457b352120cef08ac2f32624facff0e6&keyId=0&_p=0&__c=101-50-BA6B010008814303EBBBC6475162EE5A')" title="" tabindex="-1"><option value="" alt="">Select Organisation</option><option value="00000003" selected="selected" alt="CELCOM">CELCOM ACCESS mobileReload</option><option value="00000013" alt="Extra Space Segambut">Extra Space Segambut</option><option value="00000001" alt="MAXI">MAXIS hotlink mobile reload</option><option value="00000026" alt="Mobifon 018">Mobifon 018</option><option value="00000153" alt=" Card Center"> Card Center</option><option value="00000154" alt=" Loans"> Loans</option></select>
<a href="asdf" class="select2-icon">
<i id="billerlist-ajax" class="-seelist color-icon text-lg"></i>
</a>
<!-- <div id="add-local-error"></div> -->
<div class="errorMsg parsley-error-list hide">This value is required.</div>
</div>
</div>
<div class="col-lg-6 cols">
<div class="m-sm">
<label class="text-xs font-bold"> <span class="">BILLER DESCRIPTION
</span>
</label> <br>
<input id="billerdesc-addbiller-precapture" name="bill.billerDesc" class="form-control parsley-validated parsley-success" readonly="readonly" autocomplete="off" data-required="true" onkeypress="if(event.keyCode == 13){return false;};" type="text" value="CELCOM ACCESS mobileReload">
<div class="errorMsg parsley-error-list hide">This value is required.</div>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="rows m-t-md">
<div class="col-lg-6">
<label class="text-xs font-bold"> <span class="">FROM
</span>
</label> <br>
<div>
<select id="fromAccount" name="bill.fromAccount" class="form-control account-select parsley-validated parsley-success" data-required="true"><option value="">Select Account</option><option value="10" selected="selected">Current Acct Normal 248-300-355-4 (MYR) 50,000.00</option><option value="9">Current Acct Normal 248-300-328-7 (MYR) 10,000,000.00</option></select>
<div class="errorMsg parsley-error-list hide">This value is required.</div>
</div>
</div>
<div class="col-lg-3">
<label class="text-xs font-bold">
<span class="">WHEN
</span>
</label>
<br>
<div class="text-lg">
10 Mar 2017
</div>
</div>
<div class="col-lg-3">
</div>
<div class="clearer"></div>
</div>
<div class="rows m-t-md m-b-md">
<div class="col-lg-6">
<label class="text-xs font-bold"> <span class="">AMOUNT
</span>
</label>
<div>
<select id="mobileTopUp" name="bill.billAmount" class="form-control m-b account-select parsley-validated parsley-success" data-required="true"><option value="">Select Amount</option><option value="1">50</option></select>
<div class="errorMsg parsley-error-list hide">This value is required.</div>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="form-group">
</div>
<div class="clearer"></div>
<div class="row m-t-lg">
<div class="col-lg-6">
<div class="doc-buttons">
<button onclick="e2eValidateSubmit(validateOnSubmit(),true,'/2FA/processSubmit.do?token=457b352120cef08ac2f32624facff0e6&keyId=0&_p=0&__c=101-53-BA6B010008814303EBBBC6475162EE5A');return false;" id="btnsubmit" class="btn btn-s-md btn-primary" type="submit" value="Submit">
<span class="">Continue
</span>
</button>
</div>
</div>
</div>
</div>
<div class="clearer"></div>
<!-- ************************ other payment end ******************-->
</form>
答案 0 :(得分：0)
问题是你正在使用自定义选择框，当用户点击具有 select2-container 类的div时，parsley无法验证它。
此外，如果您要验证所有字段，您需要制作一个计数器，并且只有在验证所有字段后才会传递 true 。代码如下： -
function validateOnSubmit() {
var validated = false,
count = 0;
if($("#quickPayOption_O:checked").length > 0 ){
$('#otherPaymentDiv').find('.parsley-validated').each(function () {
if(!$(this).hasClass("select2-container")){
if($(this).parsley().validate()) {
count++;
}
if(count === $('#otherPaymentDiv .parsley-validated').length -1){
validated = true;
}
}
});
$('#jomPayDiv').find('.parsley-validated').each(function() {
$(this).parsley('removeConstraint','required');
flag = true;
});
return validated;
};
}