Question

如何在单击“发送”按钮时触发LeanModal功能，以通知用户任何填充字段是否无效或表单是否已成功提交。

点击发送/提交按钮时：

检查同一工作表中的PHP事件处理程序
在LeanModal上显示结果
- 如果成功，则文本以模态显示，表单中的所有字段均为空。
- 如果没有，则文本以模态显示，表单中的无效字段将突出显示。

这些是与contact.php相关的所有文件：

contact.php（我一直在研究的主要表格）
validate.php（导入到contact.php以验证表单字段）
validate.js（此文件中的函数已在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>

Answer 1

我的问题仍然不完全清楚，所以在回答时我会做出一些假设。我对LeanModal不熟悉，所以可能值得查看文档。（我建议你在你的标签中添加'jquery'，因为这主要像jquery问题一样吗？）。

您似乎拥有基于PHP的验证系统，但您希望使用JavaScript显示错误。你没有提到它，但这看起来像AJAX op的候选者，这在jQuery中很容易。您需要在表单提交上捕获click事件，因此：

$(document).ready(function() {
    $('#send).click(function() {
        // Do ajax op here

        return false;
    });
});

正如您所看到的那样，设置了一个DOM ready事件;并且您需要将表单的内容发送到服务器才能正确验证它（start here）。我似乎记得有一个优秀的jQuery表单插件可以为你做这个 - 检查出来（或者你可以手动获取表单中的值）。

验证结果可能会返回一个JSON答案，当在jQuery中收到时，它将显示模态对话框或显示一切正常的div。

如果我的设计假设是正确的，请尝试 - 让我们知道你是如何进行的。您可能需要进行一些网络搜索，或在此处提出补充问题，因为还有很多需要解决的问题： - ）

使用PHP实现LeanModal

1 个答案: