Question

我有一个使用jQuery验证插件的表单，它接收两个输入。一个输入是文章标题，另一个是文章URL。文章标题是必填项，必须至少包含10个字符。 URL是相同的，但使用URL检查URL是否被采用。通常情况下，当我提交标题和未经过的网址时，它会正确提交。当我添加一个标题，然后添加一个URL，然后点击远离输入表单时，它会起作用，并告诉我这个网址已经被删除了。当我输入标题，然后输入一个URL，然后单击提交时，会出现问题。该信息已成功提交，就好像用户未输入已采用的URL一样。仅在我单击提交后才会显示错误消息。仅当我输入标题，所采用的URL，然后直接点击提交按钮而不单击表单时，才会出现此问题。我该如何解决这个问题？这是我的代码：

HTML

<form class="article_information_form" action="" method="POST" autocomplete="off">

  <p>Title</p>
  <input id="articleTitle" type="text" name="articleTitle" maxlength="75" required>

  <p style="clear: both">Article URL</p>
  <input id="articleUrl" type="text" name="articleUrl" maxlength="65" required>

  <input id="btn" type="submit" name="article_info_btn" value="Submit">
</form>

的jQuery / AJAX

$(".article_information_form").validate({
  errorElement: 'div',
  rules: {
    articleTitle: {
      required: true,
      minlength: 10
    },
    articleUrl: {
      required: true,
      minlength: 10,
      remote: {
        url: "urlChecker.php",
        type: "post",
        data: {
          articleUrl: function() {
            return $("#articleUrl").val();

          }
        }
      }
    }
  },

  messages: {
    articleTitle: {
      required: "You have to provide a title for your article!",
      minlength: "Your title must be at least 10 characters long"
    },

    articleUrl: {
      required: "Please enter a URL for your article",
      minlength: "Your URL must be at least 10 characters long",
      remote: "This URL is already taken! Try another."
    },
  },

});

$('.article_information_form').on('submit', function(e) {
                    e.preventDefault();
                    e.stopImmediatePropagation();

                    if ($('.article_information_form').valid())
                    {
                    $.ajax({
                        type: 'POST',
                        url: '',
                        data: $(this).serialize(),
                        success: function(data) {
                          }
                    });
                    }               
                });

urlChecker.php代码

<?php
    session_start();
    require "../connect.php";

    if (isset($_POST["articleUrl"]))
    {
        $url = filter_data(friendlyUrl($_POST["articleUrl"]));
        $result = $db->query("SELECT * FROM Stories WHERE url = '$url'");

        if ($result->num_rows > 0)
        {
            $output = false;
        }

        else
        {
            $output = true;
        }



        echo json_encode($output);
    }


    function filter_data($data)
    {
          $data = trim($data);
          $data = stripslashes($data);
          $data = htmlspecialchars($data);
          return $data;
    }

    function friendlyUrl ($str = '') {

        $friendlyURL = htmlentities($str, ENT_COMPAT, "UTF-8", false); 
        $friendlyURL = preg_replace('/&([a-z]{1,2})(?:acute|circ|lig|grave|ring|tilde|uml|cedil|caron);/i','\1',$friendlyURL);
        $friendlyURL = html_entity_decode($friendlyURL,ENT_COMPAT, "UTF-8"); 
        $friendlyURL = preg_replace("![^a-z0-9]+!i", "-", $friendlyURL);
        $friendlyURL = preg_replace('/-+/', '-', $friendlyURL);
        $friendlyURL = trim($friendlyURL, '-');
        $friendlyURL = strtolower($friendlyURL);
        return $friendlyURL;

    }


?>

总结一下这个问题，当我点击表单时，URL验证工作正常。如果我输入已存在的URL并立即单击“提交”，则无法使用。

jQuery远程验证无法正常工作

0 个答案: