Avatar of Richard Lloyd
Richard Lloyd
 asked on

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 also use https://jqueryvalidation.org/ to validate the format of the field and other in the form.

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>

Open in new window


match-cardno.php
<?php session_start();

include 'config.php';


if(isset($_POST['cardno'])){
$cardno=$_POST['cardno'];
$companyid=$_POST['companyid'];

//check card exists in list of possible cards
$sql="select cardno from tblcardpossibles where cardno =? and companyid=?";
$params=array($cardno, $companyid);
$options =  array( "Scrollable" => SQLSRV_CURSOR_KEYSET );
$result=sqlsrv_query($conn, $sql, $params, $options);
include "error.php";

$row_count = sqlsrv_num_rows($result);
if($row_count=='0'){
echo "<p class='error'>You have entered an invalid card number. Please check your entry. </p>";}


//Check if card has already been issued
$sql="select title, firstname, surname, postcode from tblcardsissued where cardno =? and companyid=?";
$params=array($cardno, $companyid);
$options =  array( "Scrollable" => SQLSRV_CURSOR_KEYSET );
$result=sqlsrv_query($conn, $sql, $params, $options);
include "error.php";

$row_count = sqlsrv_num_rows($result);
$row= sqlsrv_fetch_array( $result, SQLSRV_FETCH_ASSOC);

if($row_count<>0){
$title=$row['title'];
$firstname=$row['firstname'];
$surname=$row['surname'];
$postcode=$row['postcode'];
echo "<p class='error'>Card already issued to $title $firstname $surname, $postcode</p>";}
}

?>

Open in new window

PHPAJAX

Avatar of undefined
Last Comment
Scott Fell

8/22/2022 - Mon
Scott Fell

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.

Hope that it OK.
ASKER CERTIFIED SOLUTION
Scott Fell

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Richard Lloyd

ASKER
That's very kind of you. Thank you.

I'll give it a go.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Scott Fell

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.

Thanks!