How to trigger the LeanModal function when the Send button is clicked in order to inform user whether any of the filling fields are invalid or the form has been successfully submitted.
When Send/Submit button clicked:
- check PHP event handler within the same sheet
- Display the result on the LeanModal
- If it is successful then text displayed in modal, all fields in the form are empty.
- If not, then text displayed in modal, the invalid fields in the forms are highlighted.
These are all the files which are related to the contact.php:
- contact.php (main sheet I've been working on)
- validate.php (imported to contact.php to validate the form fields)
- validate.js (functions in this file have been called in contact.php)
- Leanmodal.js
contact.php:
<head>
<script type="text/javascript">
$(function() {
$('a[rel*=leanModal]').leanModal();
});
</script>
</head>
<body>
<div id="content">
<?if( isset($_POST['send']) && (!validateName($_POST['name']) || !validateSurname($_POST['surname']) || !validateEmail($_POST['email']) || !validateMessage($_POST['message']) || !validateHuman($_POST['human']) ) ):?>
<div id="error">
<ul>
<?if(!validateName($_POST['name'])):?>
<li><strong>Invalid Name:</strong>Required more than 3 letters!</li>
<?endif?>
<?if(!validateSurname($_POST['surname'])):?>
<li><strong>Invalid Surname:</strong>Required more than 3 letters!</li>
<?endif?>
<?if(!validateEmail($_POST['email'])):?>
<li><strong>Invalid E-mail:</strong>Invalid email-address format!</li>
<?endif?>
<?if(!validateMessage($_POST['message'])):?>
<li><strong>Invalid Message:</strong>Required more than 3 letters</li>
<?endif?>
<?if(!validateHuman($_POST['human'])):?>
<li><strong>Answer Incorrect:</strong>Human Validation Failed</li>
<?endif?>
</ul>
</div>
<?elseif(isset($_POST['send'])):?>
<div id="error" class="valid">
<ul>
<li><strong>Congratulations!</strong></li>
</ul>
</div>
<?endif?>
<form method="post" id="customForm" action="contact.php">
.
.
.
<input id="send" name="send" type="submit" value="Send" />
</form>
<script type="text/javascript" src="js/validation.js"></script>
</div>
</body>