Как использовать разные SweetAlert, когда функция возвращает bool? - PullRequest
Новая
       12

Как использовать разные SweetAlert, когда функция возвращает bool?

2 голосов
/ 07 ноября 2019

Я пытаюсь настроить страницу контактов для веб-сайта, и я хотел бы добавить всплывающее окно с сообщением об успехе при отправке электронного письма (на той же странице) и предупреждение об ошибке, если любой изполя остаются пустыми, но даже когда функция (которая оценивает, заполнены ли поля) возвращает false (оставило пустое поле), она продолжает показывать предупреждение об успехе. В настоящее время контактная страница веб-сайта хорошо работает благодаря файлу contact.html и отдельному файлу mail.php, который хранит и отправляет данные, показывая сообщение об успехе подсластителя при отправке на страницу php, которая перенаправляет обратно на страницу html. Но я хотел бы иметь возможность показывать подсластитель на той же странице (contact.php), в то время как указанное предупреждение показывается в зависимости от того, какое значение bool вернет функция. Здесь вы можете найти контактную страницу php для проверки результата.

PHP: 

<?php 
global $name;
global $email; 
global $message;
global $subject;
?>

<?php 

    if (isset($_POST['name'])) {
        $name = $_POST['name'];
    }
    if (isset($_POST['email'])) {
        $email = $_POST['email'];
    }
    if (isset($_POST['message'])) {
        $message = $_POST['message'];
    }
    if (isset($_POST['subject'])) {
        $subject = $_POST['subject'];
    }

    $formcontent="From: $name \n Message: $message";
    $recipient = "legonutts@gmail.com";
    $mailheader = "From: $email \r\n";
    mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");

?>

HTML: 

<html>
<body>
    <main>
        <section>
            <div class="container">
                <form onsubmit="checkvalidation();" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
                    <div class="form-group">
                        <label>
                            <strong>Name</strong>
                        </label>
                        <input class="form-control" type="text" name="name" id="name">
                    </div>
                    <div class="form-group">
                        <button class="btn btn-warning btn-block" type="submit" value="Send" onclick="return check();">
                            Send
                        </button>
                    </div>
                </form>
            </div>
        </section>
    </main>
</body>
</html>

JS: 

function checkvalidation(){

        function SweetAlertSuccess(){
            Swal.fire(
                '¡Mensaje enviado!',
                '¡Gracias por contactarnos!',
                'success'
            )
        }

        function SweetAlertError(){
            Swal.fire({
                icon: 'error',
                title: '¡Faltan llenar algunos campos!',
                text: 'Los campos requeridos serán remarcados.'
            })
        }

        if ( check() ){
            SweetAlertSuccess();
        }
        else{
            SweetAlertError();
        }

    }

    function check(){

        var name = document.getElementById("name");
        var subject = document.getElementById("subject");
        var email = document.getElementById("email");
        var message = document.getElementById("message");

        var regx = /^([a-z 0-9\.-_]+)@([a-z 0-9-_]+).([a-z]{2,8})(.[a-z]{2,8})?$/;
        if (regx.test())
        {
            email.style.border = "solid 3px #f03535";
            document.getElementById("lblemail2").style.display = "table-row";
            document.getElementById("bremail2").style.display = "table-row";
        }


        if (name.value.trim() == "" && subject.value.trim() == "" && email.value.trim() == "" && message.value.trim() == "" )
        {

            name.style.border = "solid 3px #f03535";
            subject.style.border = "solid 3px #f03535";
            email.style.border = "solid 3px #f03535";
            message.style.border = "solid 3px #f03535";
            document.getElementById("lblname").style.display = "table-row";
            document.getElementById("lblsubject").style.display = "table-row";
            document.getElementById("lblemail").style.display = "table-row";
            document.getElementById("lblmessage").style.display = "table-row";
            document.getElementById("brname").style.display = "table-row";
            document.getElementById("brsubject").style.display = "table-row";
            document.getElementById("bremail").style.display = "table-row";
            document.getElementById("brmessage").style.display = "table-row";
            return false;

        }
        else
        {
            return true;
        }

    }

Я ожидаю, что всплывающее предупреждение будет предупреждением об ошибке, когда функция check () вернет false, но успешновыводится предупреждение (которое должно произойти только тогда, когда оно возвращает true)

ОБНОВЛЕНИЕ:

Я также пытаюсь сделать страницу контактов не обновляющейся до того, как подсластитель завершит работу довсплывающее окно и обновляется (только когда сообщение отправлено) после того, как пользователь нажимает кнопку «ОК» в предупреждении (как показано в примере этой html-страницы контактов , то есть .html и отдельного .php файл работает вместе), код которого следующий: 

<?php 
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $formcontent="From: $name \n Message: $message";
    $recipient = "legonutts@gmail.com";
    $subject = $_POST['subject'];
    $mailheader = "From: $email \r\n";
    mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");

?>

<body onpageshow="SweetAlertSuccess()">

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script src="sweetalert2.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill"></script>
<script src="sweetalert2.min.js"></script>

<script>

    function SweetAlertSuccess(){
        Swal.fire({
            title: '¡Mensaje enviado!',
            text: "¡Gracias por contactarnos!",
            icon: 'success',
            showCancelButton: false,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'OK'
        }).then((result) => {
            if (result.value) {
                location.href="contacto.html";
            }
        })
    }

</script>

Заранее спасибо!

1 Ответ

0 голосов
/ 07 ноября 2019

Дайте мне отзыв, если я неправильно прочитал вашу функцию проверки, но я полагаю, что вы хотите, чтобы она предупреждала об ошибке, либо если проверка почты регулярного выражения или проверка пуста не удалась? 

function check(){

        var name = document.getElementById("name");
        var subject = document.getElementById("subject");
        var email = document.getElementById("email");
        var message = document.getElementById("message");

        var isValid = true;

        var regx = /^([a-z 0-9\.-_]+)@([a-z 0-9-_]+).([a-z]{2,8})(.[a-z]{2,8})?$/;
        // if regex test fails, email is not valid
        if (!regx.test(email.value))
        {
            email.style.border = "solid 3px #f03535";
            document.getElementById("lblemail2").style.display = "table-row";
            document.getElementById("bremail2").style.display = "table-row";
            isValid = false;
        }

        // if name subject or message is empty, its not valid
        if (name.value.trim() == "" && subject.value.trim() == "" && email.value.trim() == "" && message.value.trim() == "" )
        {

            name.style.border = "solid 3px #f03535";
            subject.style.border = "solid 3px #f03535";
            email.style.border = "solid 3px #f03535";
            message.style.border = "solid 3px #f03535";
            document.getElementById("lblname").style.display = "table-row";
            document.getElementById("lblsubject").style.display = "table-row";
            document.getElementById("lblemail").style.display = "table-row";
            document.getElementById("lblmessage").style.display = "table-row";
            document.getElementById("brname").style.display = "table-row";
            document.getElementById("brsubject").style.display = "table-row";
            document.getElementById("bremail").style.display = "table-row";
            document.getElementById("brmessage").style.display = "table-row";
            isValid = false;
        }

        return isValid;

}

Чтобы предотвратить отправкув случае ошибки ваш onSubmit должен вернуть false. 

async function checkvalidation(submitEvent){
        // this prevents the form from submitting
        submitEvent.preventDefault();

        async function SweetAlertSuccess(){
            return Swal.fire(
                '¡Mensaje enviado!',
                '¡Gracias por contactarnos!',
                'success'
            )
        }

        function SweetAlertError(){
            Swal.fire({
                icon: 'error',
                title: '¡Faltan llenar algunos campos!',
                text: 'Los campos requeridos serán remarcados.'
            })
        }

        if ( check() ){
            await SweetAlertSuccess();
            // should only submit after 3 seconds of showing success
            setTimeout(function(){ 
              // give your form the id myForm for this to work
              document.getElementById("myForm").submit();
            }, 3000);

        }
        else{
            SweetAlertError();
        }

}
...