Jake Rutherford Jake Rutherford - 2 months ago 12
HTML Question

Why does my JS slider (Slick) interfere with PHP validation on my contact form?

I have a contact form inside a JS slider, which is powered by Slick. The contact form is spread across two pages and the JS slider is used for turning the page. After filling out the form and pushing send, contact.php states that I need to enter my name, despite doing so already. However, when I remove the JS slider script, the validation functions correctly, and after filling out the input boxes, the form is sent as an email after pushing send. Therefore I have concluded that Slick is somehow interfering with my PHP validation and I am not sure why. Please advise.

HTML:



$(document).ready(function(){

$('.single-item').slick();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<form action="nominate.php" method="post">

<div class="single-item slider">
<div class="page1">
<label class="row">
<h2 class="headline">Your full name</h2>
<input type="text" name="yourname" placeholder="Forename and surname"></input>
</label>

<label class="row email">
<h2 class="headline">Your email address <p>Don't worry, we won't spam you or share your email address</p></h2>
<input type="text" name="email" placeholder="example@rofordaward.co.uk"></input>

</label>

<label class="row">
<h2 class="headline">Name of company</h2>
<input type="text" name="companyname" placeholder="e.g. Roford"></input>
</label>
</div>

<div class="page2">
<label class="row reason">
<h2 class="headline">Reason for nomination</h2>
<textarea id="textarea" rows="6" cols="25" maxlength="1000" name="reason" placeholder="A brief evidence based summary"></textarea>
<div id="text-area-wrap">
<div id="textarea_feedback"></div>
</div>
</label>

<div class="row button-wrap">
<div class="column small-12">
<input class="button" type="submit" value="Send it!">
</div>
</div>

</div>

</div>

</form>





PHP for mailing and validation

<?php
/* Set e-mail recipient */
$myemail = "example@gmail.com";

/* Check all form inputs using check_input function */
$yourname = check_input($_POST['yourname'], "Enter your name");
$email = check_input($_POST['email'], "Enter your email");
$companyname = check_input($_POST['companyname'], "Enter a company name");
$reason = check_input($_POST['reason'], "Write your reason");

/* If e-mail is not valid show error message */
if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/", $email))
{
show_error("E-mail address not valid");
}

/*Message for the e-mail */
$message = "New submission

Name: $yourname
E-mail: $email
Company name: $companyname

Reason:
$reason

End of message
";

/* Send the message using mail() function */
mail($myemail, $subject, $message);

/* Redirect visitor to the thank you page */
header('Location: thanks.htm');
exit();

/* Functions we used */
function check_input($data, $problem='')
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
if ($problem && strlen($data) == 0)
{
show_error($problem);
}
return $data;
}

function show_error($myError)
{
?>
<html>
<body>

<b>Please correct the following error:</b><br />
<?php echo $myError; ?>

</body>
</html>
<?php
exit();
}
?>

Answer

Hello and welcome to the stackoverflow community.

Since your check_input() function basically just checks if the given string is empty after encoding it, and the validation fails, maybe the name is just not submitted at all.

My guess is that for some reason the form elements on the first slick page are not getting submitted.

You only see the name field failing to validate because it is the first field you actually check so any other failing fields are never checked.

To confirm this just comment the line

$yourname = check_input($_POST['yourname'], "Enter your name");

and see if the validation for email fails.

You can see both versions of the data submitted in the POST request using var_dump($_POST).