jQuery Validate插件在检查用户名时引发错误 - javascript

JSFIDDLE:http://jsfiddle.net/c56z1674/
(本文末尾的错误说明)

我的HTML(为简化起见,我仅包括用户名字段):

<form id="form_register_create" method="get" action="">
    <input type="text" id="register_username" name="register_username" placeholder="username" autocomplete="off" autofocus required>
    <input type="submit" id="form_register_create_submit" style="display:none">    
</form>

我的JS:

$('#form_register_create').validate({
    // specify rules
    rules : {
        register_username : {
            required : true,
            register_username : true,
            minlength : 3,
            maxlength : 18,
            remote : {
                url : "../system/check-uniqueness-username.php",
                type : "post"
            }
        }
    },
    // specify error messages
    messages : {
        register_username : {
            required : "Please enter a username.",
            register_username : "Please enter a username (between 3 and 18 chars).",
            remote : "Username already in use!"
        }
    },
    // when everything is valid, fire register function
    submitHandler : function(form) {
        register_create();
    }
});

我的PHP(check-uniqueness-username.php):

<?php

require_once 'db.php';

$username = trim(strtolower($_REQUEST['register_username']));


$results = $db -> query("SELECT * FROM users WHERE username = $username");  

if(mysqli_num_rows($results) == 1) {
 $valid = 'false';
}
else{
 $valid = 'true';
} 


echo $valid;
exit;

以下错误发生的可能性:

当我在该字段中输入用户名并通过单击另一个字段来离开该字段时,我在控制台中收到以下错误消息:

  未捕获的TypeError:无法读取未定义的属性“调用”

我发现:
如果在我的验证脚本的规则部分中省略了“ register_username:true”部分,则不会发生此错误。但是对于我来说,这部分内容不可行,因为在这种情况下,我将无法检查用户名的唯一性。

有谁知道如何避免此错误?您可以通过在用户名字段中输入一些内容然后单击电子邮件字段来尝试一下:http://jsfiddle.net/c56z1674/

参考方案

我想您正在为此使用jQuery验证文档example:

$( "#myform" ).validate({
  rules: {
    email: {                         // <----- email(1)
      required: true,
      email: true,                   // <----- email(2)
      remote: "check-email.php"
    }
  }
});

字段名称相同,但是email(2)是验证的内置版本,用于检查字段是否包含有效的电子邮件。 (Documentation)

因此,在您的代码中,只需删除“ register_username:true”,因为它不是可用的选项,并且您的验证脚本将进行php调用。

JSFiddle

HTML:

<form id="form_register_create" method="get" action="">
    <input type="text" id="register_username" name="register_username" placeholder="username" autocomplete="off" autofocus required>
    <input type="submit" id="form_register_create_submit" style="display:none">    
</form>

JS:

$('#form_register_create').validate({
    // specify rules
    rules : {
        register_username : {
            required : true,
            minlength : 3,
            maxlength : 18,
            remote : {
                url : "../system/check-uniqueness-username.php",
                type : "post"
            }
        }
    },
    // specify error messages
    messages : {
        register_username : {
            required : "Please enter a username.",
            register_username : "Please enter a username (between 3 and 18 chars).",
            remote : "Username already in use!"
        }
    },
    // when everything is valid, fire register function
    submitHandler : function(form) {
        register_create();
    }
});

jQuery ajax发布电子邮件字段 - javascript

我不确定为什么我无法发布电子邮件字段的内容,这是我的代码。<html> <head> <title></title> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> </head>…

jQuery Ajax上传文件php即使没有内容也接收数组 - javascript

它正在工作,但是在每次提交时,我什至都收到一个数组,甚至没有将文件添加到文件输入(多文件输入) postData = new FormData(this); $.ajax({ url: "/url", type: "POST", data: postData, cache: false, contentType: fa…

jQuery C#中的数据集值 - javascript

我在其中一页中,URL包含查询字符串值。  QSecID = 164&QTempId = 55&QSecName = New%20Temp%20Bt当页面加载它们并尝试获取值时,它可以正常工作。$(document).ready(function() { function getUrlParameter(name) { name = name.replace…

jQuery .click不适用于php文件 - javascript

我有一个连接数据库并显示一些图片的网站。我要这样做,以便当您单击其中一张图片时,它会显示一个警报,但是在动态渲染图像时似乎不起作用。每当我在jsbin上尝试它时,它都可以工作,但是当我使用php文件尝试时,它却不能。我正在使用jquery和bootstrap。JSbin:http://jsbin.com/xamovudiroqe/2/PHP代码while($…

如何用jQuery隐藏模态? - javascript

纽扣<button type="button" class="btn" onclick="CountClass()" runat="server" data-toggle="modal" data-target="#inlineForm1�…