Question

html结构：

<form method="post" id="comment-form" accept-charset="UTF-8">
<div class="form-item form-type-textfield form-item-name">
 <input type="text" id="edit-name" name="name" value="" size="30" maxlength="60" class="form-text required" />
</div>
<div class="form-item form-type-textfield form-item-mail">

 <input type="text" id="edit-mail" name="mail" value="" size="30" maxlength="64" class="form-text required" />

</div>

<div class="form-item  form-item-homepage">

 <input type="text" id="edit-homepage" name="homepage" value="" size="30" maxlength="255" class="form-text" />
</div>
<div  id="edit-comment-body">

<label for="edit-comment-body-und-0-value">comment <span title="required" class="form-required">*</span></label>

<textarea class="text-full form-textarea required" id="edit-comment-body-und-0-value" name="comment_body[und][0][value]" cols="60" rows="5"></textarea></div>
</div>

jquery代码：

$(document).ready(function(){

if($("#comment-form #edit-name").val()=='' || $("#comments #edit-email").val() =='' ||$("edit-comment-body"))
$("#comments #edit-submit").click(function(){
   $('#comment-form #edit-name').append('<span style="color:red;">please type your name</p>');
   $('#comment-form #edit-mail').append('<span style="color:red;">please type your emali</p>');
  $('#comment-form #edit-comment-body label span').append('<span style="color:red;">pleae type the content</p>');
});

});

我想在输入文字后添加一些红色文字。但上面的代码无法正常工作？我的jquery代码出了什么问题？谢谢

Answer 1

您使用ID comments提供的HTML中没有任何元素。还没有ID为edit-submit的元素。因此，选择器$("#comments #edit-submit")不会匹配任何元素。

这意味着您正在尝试将click侦听器绑定到不存在的元素。

一般来说，你应该避免选择资格过高。由于元素ID必须是唯一的，因此元素ID选择器足以匹配（最多）单个元素。这意味着您可以更改以下内容：

$("#comment-form #edit-name")至$("#edit-name")
$("#comments #edit-submit")至$("#edit-submit")
$('#comment-form #edit-mail')至$('#edit-mail')
$('#comment-form #edit-comment-body label span')到
$('#edit-comment-body label span')

我改变了代码。它仍然无法正常工作。

这是因为drupal.js调用jQuery.noConflict()使window.jQuery保持不变，但删除了window.$。在代码中使用jQuery代替$，并将$作为参数传递给文档就绪回调：

jQuery(function($)
{
    if (!$("#edit-name").val() || !$("#edit-email").val() || !$("#edit-comment-body").val())
    {
        $("#edit-submit").click(function()
        {
            $('#edit-name').after('<span style="color:red;">请输入你的名字</span>');
            $('#edit-mail').after('<span style="color:red;">请输入你的邮箱</span>');
            $('#edit-comment-body label span').append('<span style="color:red;">请填写内容</span>');
        });
    }
});

Answer 2

第一个错误在

if($("#comment-form #edit-name").val()=='' || $("#comments #edit-email").val() =='' ||$("edit-comment-body"))

html格式中使用的是$（'＃comments'）id？？？

并且第二个错误应该是

在您的javascript中...您附加范围，其结尾标记为 P ？？？

希望得到它的帮助。

Answer 3

有很多错误 - 你首先使用选择器是不好的。你应该尽可能坚持使用单一的id，例如：

$("#edit-submit")

接下来的问题是，你在浪费一个 IF 语句 - 当页面首次加载时，你正在检查某些输入是否为空白 - 它们可能是什么，而且即使它们仍然是你不希望有人能够清空并且传递有效只是因为没有添加监听.click()的功能。

加载页面并且字段为空后，您将一个.click()侦听器添加到按钮。将.click()函数添加到按钮会更容易，然后始终检查验证。

因此，举例来说，您可以将jQuery改为像这样：

$("#edit-submit").click(function(e) {
    var name = $('#edit-name');
    var mail = $('#edit-mail');
    var comment = $('#edit-comment-body-und-0-value');
    var blank = false;
    if (name.val()=='') {
        name.after('<span style="color:red;">please type your name</span>');
        blank = true;
    }
    if (mail.val()=='') {
        mail.after('<span style="color:red;">please type your emali</span>');
        blank = true;
    }
    if (comment.val()=='') {
        comment.after('<span style="color:red;">pleae type the content</span>');
        blank = true;
    }
    if (blank) {
        e.preventDefault();   
    }
});

您还需要添加一个提交按钮，但我会假设您错过了HTML HTML复制粘贴：

<input type="submit" id="edit-submit" value="submit" />

稍微解释一下jQuery：

首先获取您要检查的字段的值。
现在存储一个变量以检查是否有任何一个字段为空。
现在检查每个值以查看其是否为空。
- 如果是，请使用`.after（）`添加消息，不能附加到输入，所以请在输入后放置。
- 同时在代码中更改空白变量
最后检查空白变量是否已更改并停止提交，否则表单会在浏览器提交错误表单时短暂显示消息。

为了增强您的验证，您只需要错误消息一次，如果错误已得到纠正，但另一个仍然存在，则应删除更正后的消息（假设多次点击提交）。

为此，请在错误消息中添加一个类：

<span style="color:red;" class="error-message">please type your name</span>

在你的功能的顶部：

$('.error-message').remove();

最后.click()函数：

$("#edit-submit").click(function(e) {
    $('.error-message').remove();
    var name = $('#edit-name');
    var mail = $('#edit-mail');
    var comment = $('#edit-comment-body-und-0-value');
    var blank = false;
    if (name.val()=='') {
        name.after('<span style="color:red;" class="error-message">please type your name</span>');
        blank = true;
    }
    if (mail.val()=='') {
        mail.after('<span style="color:red;" class="error-message">please type your emali</span>');
        blank = true;
    }
    if (comment.val()=='') {
        comment.after('<span style="color:red;" class="error-message">pleae type the content</span>');
        blank = true;
    }
    if (blank) {
        e.preventDefault();   
    }
});

See it working here

我将尝试解释e.preventDefault()部分首先， IF 语句....基本上是 IF 语句说：

if (what ever is in here is TRUE) {
    Do what ever code is written here....
}

因此，在.click()函数的顶部，我们声明了一个名为blank的变量，并将其设置为 FALSE 。因此，如果后面的代码中没有任何位置，直到我们进入 IF 语句，将其更改为 TRUE 代码将无法运行。
所以在代码中，每当我们检查其中一个输入是否为空时，我们都会添加一条消息并将blank更改为 TRUE ，所以现在 IF中的代码语句将会运行。

在代码中，e.preventDefault() 这是一种阻止浏览器执行默认情况下通常执行操作的方法。
因此，当我们声明一个回调函数时，在这种情况下是.click()事件，我们要求jquery监听某些内容的点击，因此当它获得一个时，该事件也可以在代码中使用。
所以想象一下，自从网页开始，如果有人点击超链接（<a href=".....），浏览器知道它需要关注该链接，无论jquery做什么，同样如果你提交表格，浏览器知道它应该遵循表格声明中声明的链接现在，因为我们不想提交 IF 表单，所以我们需要preventDefault() （阻止浏览器执行默认操作）。< / p>

为此，当我们声明.click(function(e) {时，我们声明了一个新变量e，该变量在函数中可用，e是导致{{1}的事件要触发的功能 - 点击超链接，点击提交，点击图片即可我们可以将内容更改为更长的代码，以便更容易理解，例如：.click()到e （事实上你想要的任何内容）：

event

Answer 4

对于初学者来说，你传递给append函数的HTML毫无意义：

<span style="color:red;">please type your name</p>

您打开<span>元素，然后关闭<p>元素。

Answer 5

在一个稍微单独的说明中，看起来你正在构建某种验证......我是否可以建议使用已经尝试和测试的内容，如jQuery Validation Plug-in？

它非常成熟，并且可以开箱即用地处理验证情况......使用自定义验证器插件可以实现所有其他方案。

这里可以找到一些Demos。

我的jquery代码出了什么问题？

5 个答案: