javascript - 使用 btn 对表单进行 HTML5 验证，触发 JS 函数发送 php 邮件并在成功时显示模式

Question

我的网站上有表单，当我单击按钮时，我会触发一个 JS 函数，该函数从我的表单中获取输入并使用 php 发送邮件。邮件发送后，模式会显示感谢联系。一切都很完美，直到我尝试使用“需要 HTML5”来验证表单。如果我使用提交表单，验证有效，但我的模式无效。这让我发疯，这一定是我错过的一些简单的解决方案。我进行了很多搜索，但没有找到适合我的问题的解决方案。

BR 垫子

我的 HTML

    <input type="text" name="name" id="name" required placeholder="Ditt namn:"><br>                  
    <input type="email" name="mail" id="mail" required placeholder="Din e-post:"><br>
    <input type="tel" name="phone" id="phone" required placeholder="Ditt telefonnummer:"><br>                   
    <textarea name="message" id="message" required placeholder="Ditt meddelande:" rows="10"></textarea>                 
    <table>
    <td><input type="checkbox" name="checkbox" id="checkbox" value="checkbox" required ></td><td>
    <label for="checkbox">&nbsp;&nbsp;Jag har läst och godkänner news <a onclick="showModal('intrigitetspolicyModal')">integritetspolicy</a></label>
   </td> <br>
    </table>
    <input id="buttonMail" type='button'  onclick=”sendMail()” value='Skicka'/>               
    </form>

我的JS

  function sendMail(){

    var data = {
        name: $("#name").val(),
        mail: $("#mail").val(),
        phone: $("#phone").val(),
        message: $("#message").val()
    };
    $.ajax({
        type: "POST",
        url: "javaScript/mail.php",
        data: data,

        success: function(){
        }

    });

    showModal('kontaktModal');
    $("#formMail").trigger('reset');
    return false;

}

function showModal(Modal){
    var modal = document.getElementById(Modal);
    modal.style.display = "block";
}

我的 PHP

<?php

如果($_POST){

$to = "example@example";
$subject = "Medelande från example";
$subject2 = "Kopia på det formulär du skicka på example";
$name = $_POST['name'];
$from = $_POST['mail'];
$phone = $_POST['phone'];
$message = $name .  " skrev:" . "\n\n" . $_POST['message'] . "\n\n"  . $_POST['name'] . "\n" . $_POST['mail'] . "\n" . $_POST['phone'];
$message2 = "Här är en kopia på ditt meddelande " . $first_name . "\n\n" . $_POST['message'];

$headers = "From:" . $from;
$headers2 = "From:" . $to;

mail($to,$subject,$message,$headers); //send email
mail($from,$subject2,$message2,$headers2); // sends a copy of the message to the sender

} ？>

Answer 1

基本上，您只需在 sendMail() 函数上调用 reportValidity() 即可受益于 HTML5 验证，而无需实际触发表单提交。

这样的东西应该适合你:

function sendMail(){
    var isValid = document.querySelector('from').reportValidity();
    if (!isValid) {
        return false;
    }

    var data = {
        name: $("#name").val(),
        mail: $("#mail").val(),
        phone: $("#phone").val(),
        message: $("#message").val()
    };
    $.ajax({
        type: "POST",
        url: "javaScript/mail.php",
        data: data,

        success: function(){
        }

    });

    showModal('kontaktModal');
    $("#formMail").trigger('reset');
    return false;
}

在此处查看更多信息/示例:https://googlechrome.github.io/samples/report-validity/