Parsley validation return false on first click and true on second click of button
Question
I am doing form validation where I have some input fields and select box.
Problem is when I click on submit button its not able to call validate function on first click but when I do second click, complier able to call validate and return true and my form get validated Code is as under :-
JS code
function validateOnSubmit(){
$('form[data-validate="parsley"]').each(function () {
if($(this).parsley().validate()) {
validated = true;
}
});
}
HTML Code
<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>
1 answers
solution1
0 2017-03-14 03:49:26
Problem is you are using custom select box and when user will click on div having class select2-container , parsley not able to validate it.
Also if you want to validate all fields you need to make a counter and only pass true when all fields get verified. Code is as under :-
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;
};
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
click to return false, click again to return true
Return true/false on submit button click, based on ajax response
Button first action on click and second action on click
JavaScript click if clicked return true if not false
'Submit' Button click causes postback on first click and submits on the second click
First button click + Second button click, utilize button's data
How do I click Next button First step check Validation and second step Not check Validation?
How to return true or false values using JavaScript or jQuery after click on confirm or cancel button from confirm box?
How may I return true or false when I click on confirm dialog button?
Validation is not working in second time button click
Related Tags