Prevent PHP form submit depending on Ajax form response
I have a PHP form that is used for entering a membership number.
When the input field changes, an ajax call is fired to a. check that the card number is from a valid range of possible card numbers and b. check if the card has already been issued.
If both checks are satisfied then no error message are displayed and the user can submit the form.
If either check fails, a warning message is displayed (either card not valid, or card already issued), but the form can still be submitted.
I am looking for a way of making the submit button "disabled" unless the 2 checks on the field are satisfied. This could be either via the https://jqueryvalidation.org/ or otherwise.
The relevant parts of the code are shown below
Thank you.
<form action'#' method='post' id='account-add'>";Card No<br/><input type='text' name='cardno' id='cardno'/><div id='disp'></div><input type='hidden' name='postback' value='add'/><input type='submit' id='submit' value='Add' /></form><!--jquery validation--><script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js?v=1"></script><script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js?v=1"></script><script>$().ready(function() { $.validator.addMethod("cardno", function(value, element) { return this.optional(element) || /^xyz[0|1|9]\d{5}X$|^LYBLA[2|3|4|9]\d{6}$|^TMP\d{9}$/i.test(value); }, "Card Number is invalid. It should be xyz, 6 digits ending with X, or 7 digits");$("#account-add").validate({ rules: { cardno: {cardno:true, required:true}, }, messages: { cardno: "Card no must be in the format xyz followed by 6 digits ending in X, or 7 digits.", } });});</script><!--Ajax call--><script type="text/javascript">$(document).ready(function(){$("#cardno").change(function() {var cardno = $('#cardno').val();if(cardno===""){$("#disp").html("");}else{$.ajax({type: "POST",url: "match-cardno.php",data: "cardno="+ cardno + "&companyid=xyz",success: function(html){$("#disp").html(html);}});return false;}});});</script>
What you want to do is make submit button disabled on start, after each of the required fields are entered, use your ajax call to return either a yes or no value. When both fields return yes, then enable the submit button.
Front end validation is good to help the user fix quick errors like not entering a valid date or leaving a field blank. You still have to do the validation on the back end regardless. For validating credit cards, I have always just left that to the back end and display any messages received from the processor.
In this case, I would simply submit the number, then on the back end first run it through your own database to make sure there is not a match. If there is a match update your error information and send back to the user. If there is not a match, process the card number and get your validation from that service. All of this can be done in one ajax call. Then only use your jquery validation to disable the submit button once there are some numbers in the field.
Richard Lloyd
ASKER
Thanks Scott.
I think that I follow the login, but not too hot on javascript, so I'll give it a go, but I might come back to you if I get stuck.
You didn't have to close out the question. I hope this helped you make sense of things.
For this, you really are only concerned with the front end (html/css/js). Your backend code is only processing your ajax requests.
1) Use jqueryvalidation only to prevent potential bad data from being submitted
2) If you do use the card already in use test via ajax in conjunction with jqueryvalidation, then make sure to also validate on form submit (don't trust any submitted data)
If you run into trouble, just post another question with your code or link to your example page.
Front end validation is good to help the user fix quick errors like not entering a valid date or leaving a field blank. You still have to do the validation on the back end regardless. For validating credit cards, I have always just left that to the back end and display any messages received from the processor.
In this case, I would simply submit the number, then on the back end first run it through your own database to make sure there is not a match. If there is a match update your error information and send back to the user. If there is not a match, process the card number and get your validation from that service. All of this can be done in one ajax call. Then only use your jquery validation to disable the submit button once there are some numbers in the field.