javascript - 使用 ajax 验证提交和保存表单 - 重要

Question

请帮助我..我想验证表单并使用 ajax 发送。

验证没有 ''onsubmit="return validateForm(this);"'' 工作。

但是当表单正确时，它的发送表单(页面刷新..)请耐心等待并帮助我..

这个页面是在 php 上的。但我必须只用 js/jquery 验证然后发送 ajax。

这对我很重要，这个页面是给新人的..

表格:

<form action="index.php?page=insertContact" id="ajax_form" enctype="multipart/form-data" method="post" onsubmit="return validateForm(this);">
        <div>

            <input type="text" id="name" name="name" placeholder="Imię i nazwisko:" />
            <ul class="error"></ul>

            <input type="text" id="mail" name="mail" placeholder="Adres e-mail:"/>
            <ul class="error"></ul>
            <div>
                <input type="text" id="phone_area" name="phone_area" placeholder="Nr. kier.:"/>
                <div class="clear"></div>
                <ul class="error phone_area"></ul>
            </div>
            <div>
                <input type="text" id="phone" name="phone" placeholder="Telefon kontaktowy:"/>
                <div class="clear"></div>
                <ul class="error phone"></ul>
            </div>

            <input type="text" id="title" name="title" placeholder="Tytuł wiadomości:"/>
            <ul class="error"></ul>

            <textarea id="content_area" name="content_area" placeholder="Treść wiadomości:"></textarea>
            <ul class="error"></ul>
            <input type="submit" name="submit" class="submit" value="Wyślij formularz"/>
            <a href="#" id="send_form" title="Wyślij">Wyślij</a>

        </div>


    </form>

和 js:

function ValidateName(name) {
    var reg = /^([A-Za-z\-\. ]{1,50})$/;
    if (reg.test(name) == false) {
        return false;
    }
    else {
        return true;
    }
}


function ValidateEmail(address) {
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    if (reg.test(address) == false) {
        return false;
    }
    else {
        return true;
    }
}
function ValidatePhoneArea(phone_area) {
    var reg = /^[0-9]{4}$/;
    var reg2 = /^[+]{1}[0-9]{2}$/;
    if ((reg.test(phone_area) || reg2.test(phone_area)) == false) {
        return false;
    }
    else {
        $('#ajax_form ul.phone_area').find('li').remove();
        return true;
    }
}
function ValidatePhone(phone) {
    var reg = /^[0-9]{7}$/;
    var reg2 = /^[0-9]{9}$/;
    if ((reg.test(phone) || reg2.test(phone)) == false) {
        return false;
    }
    else {
        $('#ajax_form ul.phone').find('li').remove();
        return true;
    }
}
function ValidateTitle(title) {
    if ((title.length) > 100) {
        return false;
    }
    else {
        return true;
    }
}
function ValidateContent(content_area) {
    if ((content_area.length) > 1000) {
        return false;
    }
    else {
        return true;
    }
}


function validateForm(AForm) {

    var tekst = '';
    if (AForm.name.value == "") {
        $('#ajax_form #name').next('ul').children().remove();
        $('#ajax_form #name').next('ul').append('<li>Wpisz swoje imię i nazwisko</li>').css('display', 'block');
        tekst = "Nieprawidłowe dane";
    }
    else if (AForm.name.value != "") {
        $('#ajax_form #name').next('ul').children().remove();
        if (!ValidateName(AForm.name.value)) {
            $('#ajax_form #name').next('ul').children().remove();
            $('#ajax_form #name').next('ul').append('<li>Wpisz poprawnie swoje imię i nazwisko</li>').css('display', 'block');
            tekst = "Nieprawidłowe dane";

        }
    }


    if (AForm.mail.value == "") {
        $('#ajax_form #mail').next('ul').children().remove();
        $('#ajax_form #mail').next('ul').append('<li>Wpisz swój adres e-mail</li>').css('display', 'block');
        tekst = "Nieprawidłowe dane";
    } else if (AForm.mail.value != "") {
        $('#ajax_form #mail').next('ul').children().remove();
        if (!ValidateEmail(AForm.mail.value)) {
            $('#ajax_form #mail').next('ul').children().remove();
            $('#ajax_form #mail').next('ul').append('<li>Wpisz poprawnie swój adres e-mail</li>').css('display', 'block');
            tekst = "Nieprawidłowe dane";
        }
    }

    if (AForm.phone_area.value == "") {
        $('#ajax_form ul.phone_area').find('li').remove();
        $('#ajax_form ul.phone_area').append('<li>Wpisz numer kierunkowy</li>').css('display', 'block');
        tekst = "Nieprawidłowe dane";
    } else if (AForm.phone_area.value != "") {
        $('#ajax_form ul.phone_area').find('li').remove();
        if (!ValidatePhoneArea(AForm.phone_area.value)) {
            $('#ajax_form ul.phone_area').find('li').remove();
            $('#ajax_form ul.phone_area').append('<li>Poprawny nr. kier. np. +48 lub 0048</li>').css('display', 'block');
            tekst = "Nieprawidłowe dane";
        }
    }


    if (AForm.phone.value == "") {
        $('#ajax_form ul.phone').find('li').remove();
        $('#ajax_form ul.phone').append('<li>Wpisz swój numer telefonu</li>').css('display', 'block');
        tekst = "Nieprawidłowe dane";
    } else if (AForm.phone.value != "") {
        $('#ajax_form ul.phone').find('li').remove();
        if (!ValidatePhone(AForm.phone.value)) {
            $('#ajax_form ul.phone').find('li').remove();
            $('#ajax_form ul.phone').append('<li>Wpisz poprawnie swój numer telefonu</li>').css('display', 'block');
            tekst = "Nieprawidłowe dane";
        }
    }


    if (AForm.title.value == "") {
        $('#ajax_form #title').next('ul').children().remove();
        $('#ajax_form #title').next('ul').append('<li>Wpisz tytuł wiadomości</li>').css('display', 'block');
        tekst = "Nieprawidłowe dane";
    }
    else if (AForm.title.value != "") {
        $('#ajax_form #title').next('ul').children().remove();
        if (!ValidateTitle(AForm.title.value)) {
            $('#ajax_form #title').next('ul').children().remove();
            $('#ajax_form #title').next('ul').append('<li>Tytuł za długi</li>').css('display', 'block');
            tekst = "Nieprawidłowe dane";

        }
    }
    if (AForm.content_area.value == "") {
        $('#ajax_form #content_area').next('ul').children().remove();
        $('#ajax_form #content_area').next('ul').append('<li>Wpisz treść wiadomości</li>').css('display', 'block');
        tekst = "Nieprawidłowe dane";
    }
    else if (AForm.content_area.value != "") {
        $('#ajax_form #content_area').next('ul').children().remove();
        if (!ValidateContent(AForm.content_area.value)) {
            $('#ajax_form #content_area').next('ul').children().remove();
            $('#ajax_form #content_area').next('ul').append('<li>Treść za długa</li>').css('display', 'block');
            tekst = "Nieprawidłowe dane";

        }
    }



    if (tekst != "") {
        return false;
    } else {
        alert('send');
//        return false;
        $(function () {

//            $('#ajax_form').on('click', '.submit', function () {
            var $form = $(this).parents('form');
            var sendData = $form.serialize();
            var action = $form.attr('action');
//                validateForm();

            $.ajax({
                type: "POST",
                url: 'index.php?page=insertContact',
                data: sendData,
                dataType: 'html',
                cache: false,

                success: function (response) {
                    alert(1);
                }
            });
            return false;
        });
//        });

//        return true;
    }


}

更新现在验证和 ajax 工作(页面不刷新)，但不形成任何帖子。也许我在 php 中有错误..

<?php
    $title = "";
    if (isset($_GET['page']) && $_GET['page'] != ''){
        $page = $_GET['page'];
        switch ($page){
            case 'contact' :
                include "page.php";
                break;
            case 'insertContact':
                $name = $_POST['name'];
                $mail = $_POST['mail'];
                $phone = $_POST['phone'];
                $title = $_POST['title'];
                $content = $_POST['content_area'];
                $lol = $name."\t".$mail."\t".$phone."\t".$title."\t".$content."\n";
                $file = "baza.txt";
                $fp = fopen($file, "a+b");
                flock($fp, 2);
                fwrite($fp, $lol );
                flock($fp, 3);
                fclose($fp);
                mysql_query("insert into pages (pName, pMail, pPhone, pTitle, pContent) values ( '$name', '$mail', '$phone', '$title', '$content')");
                header("Location: index.php");
                break;
     }
    } else {
        include "page.php";
    }
?>

正确答案

<强>1。约翰的帖子是正确的

<强>2。我更正:

if (tekst != "") {
return false;
} else {
return true;
}

Tnx 寻求帮助:)

Answer 1

首先，不要向表单的提交按钮添加点击处理程序。相反，向表单添加一个提交处理程序。其次，不要在 validateForm() 函数内执行此操作。

将以下代码放在 validateForm() 函数之外:

$(function() {
    $('#ajax_form').submit(function(e) {
        e.preventDefault();
        var $form = $(this);
        if (validateForm($form[0])) {
            $.ajax('index.php?page=insertContact', {
                type: 'POST',
                data: $form.serialize(),
                dataType: 'html',
                cache: false,
                success: function(html) {
                    alert('Response: ' + html);
                }
            });
        }
    });
}

您还必须使 validateForm() 函数返回 true 或 false，具体取决于表单是否有效.