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

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

溴 垫子

我的HTML

我的PHP

<?php

}

---

？>

基本上，您只需在

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;
}

---

请参阅此处的更多信息/示例：

当使用所需的

时，脚本如何失败？如何调用
sendMail（）
？很抱歉，我现在已经编辑了我的帖子。。。我的脚本可以工作，但验证不能。如果我将按钮更改为“提交”，则验证有效，但随后页面重新加载，我的模式不起作用。这就是我正在寻找的解决方案。你真傻，你让我开心！！
<?php

$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

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;
}