表单成功和表单验证消息的不同功能

时间:2011-11-30 10:19:08

标签: javascript jquery ajax function

我刚刚获得了一些函数和回调的帮助,以便在我们的表单上提交此动画:

            $("#message").show().delay(5000).fadeOut('fast', function(){
            $("#slide_panel").slideToggle("slow");
});

虽然,我现在遇到的问题是,如果有人必须在没有输入正确详细信息的情况下提交表单,也会弹出错误消息(弹出与感谢信息相同的div“消息”),延迟5秒后关闭表格。

当然,我不希望它关闭表单,而是显示错误消息5秒钟,然后淡出错误消息。

我需要在此处添加任何内容:

function(data){
            document.getElementById('message').innerHTML = data;
            $('#message').slideDown('slow');
            $('#contactform img.loader').fadeOut('fast',function()
{$(this).remove()});
            $('#submit').removeAttr('disabled');
            if(data.match('success') != null);
            $('#name').val( "" );
            $('#email').val( "" );
            $('#phone').val( "" );
            $('#dayin').val( "" );
            $('#dayout').val( "" );
            $('#comments').val( "" );
            $('#verify').val( "" );
            $("#message").show().delay(5000).fadeOut('fast', 
function(){
            $("#slide_panel").slideToggle("slow");
});

        }
    );

    });

    return false;

});

});

我假设我需要做类似这段代码的事情:

if(data.match('success') != null);

在我的contact.php表格中....我有这个:

if (isset($_POST['verify'])) :
    $posted_verify   = $_POST['verify'];
    $posted_verify   = md5($posted_verify);
else :
    $posted_verify = '';
endif;

// Important Variables
$session_verify = $_SESSION['verify'];

if (empty($session_verify)) $session_verify = $_COOKIE['verify'];

$error = '';

    if(trim($name) == '') {
        $error .= '<li>Your name is required.</li>';
    }

    if(trim($email) == '') {
        $error .= '<li>Your e-mail address is required.</li>';
    } elseif(!isEmail($email)) {
        $error .= '<li>You have entered an invalid e-mail address.</li>';
    }

    if(trim($phone) == '') {
        $error .= '<li>Your phone number is required.</li>';
    } elseif(!is_numeric($phone)) {
        $error .= '<li>Your phone number can only contain digits.</li>';
    }

    if(trim($comments) == '') {
        $error .= '<li>You must enter a message to send.</li>';
    }

    if($session_verify != $posted_verify) {
        $error .= '<li>The verification code you entered is incorrect. 
</li>';
    }

    if($error != '') {
        echo '<div class="error_message">Attention! Please correct the  
errors below and try again.';
        echo '<ul class="error_messages">' . $error . '</ul>';
        echo '</div>';

    } else {

    if(get_magic_quotes_gpc()) { $comments = stripslashes($comments); }

我需要在这做什么?或者我只需要编辑javascript文件吗?

2 个答案:

答案 0 :(得分:1)

如果您使用JSON在后面的代码中的某处调用函数,则可以返回状态属性。

我在我当前的项目中使用它,以下是我如何使用它的一个例子:

var link = '/brainbattleJSON/MarkAssignmentAsInProgress';
                $(this).hide();
                $.getJSON(link, { questionId: qId }, function (json) {
                   if(json.status == "ok"){
                   //do this
                   }else{
                   //do this
                   }

                });

代码背后:

// your function with validation
// if the form is valid make status "ok" otherwise put anything else
Return Json(New With {.status = "ok"});

我希望这可以帮助你一点:)

编辑:

您需要将var link的值更改为检查表单的函数路径。 然后你现在说你的错误!=''你会发回json。 你会说:

return json(new with{.status = 'error', .errors = 'yourErrors'})

因此,对于错误,如果表单上出现多个错误,则发送数组可能会很有用。 所有消息将不再在带有echo的php中显示,但你必须使用javascript将错误放在那里。

答案 1 :(得分:1)

我在上面的链接中有一个上传的注册和登录页面(zip文件): http://www.4shared.com/folder/uanQHCAg/_online.html

它使用相同的div来显示成功和错误消息。您可以尝试并实现您正在寻找的内容,并添加淡出效果。