Question

所以我遇到了一个非常奇怪的问题，我希望有人可以给我一个暗示正在发生的事情。我开发了一个Facebook应用程序（页面标签），以便用户可以参加比赛。使用jQuery验证表单......好吧，这是问题所在！

当输入no或false信息时，验证（边框颜色的变化和错误文本的淡入）会很快消失，然后立即再次隐藏。所以基本上它不会“坚持”。奇怪的是我之前在不同的FB页面上使用过它并且工作正常。唯一的区别是另一页没有扇形门。

知道发生了什么事吗？这是代码：

的index.php

<?php
require_once 'src/facebook.php';
$facebook = new Facebook( 
array(
    'appId' => 'xxx',
    'secret' => 'xxx', 
    'cookie' => true, 
)
);

$signed_request = $facebook->getSignedRequest();

$like_status = $signed_request["page"]["liked"];

if ($like_status == "1" || $fan_status == '1') {
header('Location: post-fangate.php');
} else {
header('Location: pre-fangate.php');
}

?>

用户喜欢该页面后：

<!DOCTYPE html>
<html>
<head>
<title>Competition</title>

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style.css" />

<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
<script src="js/bootstrap.min.js"></script>
<script src="js/validator.js"></script>

</head>
<body>

<form method="POST" action="">
   <legend>Join the competition</legend>

    <div class="input-prepend">
      <span class="add-on"><i class="icon-user"></i></span>
      <input class="text" name="name" type="text" placeholder="your name" />
  <div class="name-validation">Your name is required to enter the competition</div>
</div>

<div class="input-prepend">
  <span class="add-on"><i class="icon-envelope"></i></span>
  <input class="text" name="email" type="text" placeholder="Your email address..." />
  <div class="email-validation">A valid e-mail address is required to enter the competition</div>
</div>

<div class="input-prepend">
   <span class="add-on"><i class="icon-home"></i></span>
   <input class="text" name="postal" type="text" placeholder="Your postal code" />
   <div class="postal-validation">We require your postal code to verify that you are based in the UK</div>
</div>

<label class="checkbox">
   <input type="checkbox" class="rules"> I accept the <a data-target="#competition-rules" data-toggle="modal">competition rules</a>
</label>
<div class="checkbox-validation">You must accept our competition rules</div>

<input type="submit" class="btn btn-success formSubmit" value="Enter Now" />

<div class="done">
   <p class="title">Thank you!</p>
   <p>You have successfully joined the competition. We will notify the winner within one (1) week after the competition's end date.</p>
</div>
</form>

</body>
</html>

验证

$(document).ready ( function() {

//Form 1 Validation
$('.formSubmit').click(function() {          

    // VALIDATION PART
    var form = $(this).closest('form');
    var name = form.find('input[name=name]');
    var email = form.find('input[name=email]');
    var category = form.find('input[name=postal]');
    var email_regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.(ac.uk)$/;
    var passed = true;

    if (name.val()=='') {
        name.addClass('highlight');
        form.find('.name-validation').fadeIn('slow');
        passed = false;
    } else {
        name.removeClass('highlight');
        form.find('.name-validation').fadeOut();
    }

    if (email.val()=='' || !email_regex.test(email.val()) ) {
        email.addClass('highlight');
        form.find('.email-validation').fadeIn('slow');
        passed = false;
    } else {
        email.removeClass('highlight');
        form.find('.email-validation').fadeOut();
    }

    if (postal.val()=='') {
        postal.addClass('highlight');
        form.find('.postal-validation').fadeIn('slow');
        passed = false;
    } else {
        postal.removeClass('highlight');
        form.find('.postal-validation').fadeOut();
    }

    if (form.find('.rules').is(':checked')) {
        form.find('.checkbox-validation').fadeOut();
    } else {
        form.find('.checkbox-validation').fadeIn();
        passed = false;
    }

    if (!passed) {
        return false;
    }

    //organize the data properly
    var data = 'name=' + name.val() + '&email=' + email.val() + '&postal=' + postal.val();

    //disabled all the text fields
    form.find('.text').attr('disabled','true');

    //show the loading sign
    $('.loading').show();

    //start the ajax
    var request = $.ajax({

        type: "POST",
        url: "process.php",
        data: data,
        cache: false,
        success: function (html) {
            if (html == "true") {

                form.find('.done').fadeIn();

            } else {
                alert("There was an error with your entry. Please try again later while we fix it!");
            }
        },
        error: function(jqXHR, textStatus, error) {
            // Fail
            alert("Form Error: " + error);
        }
    });

    //cancel the submit button default behaviours
    return false;
});
});

有人有想法吗？我真的很感谢你的帮助！

验证不会“粘住”，快速显示然后再次隐藏

0 个答案: