Question

我正在学习jQuery，但我不能让这个例子有效。我知道这很简单，但我不知道我错过了什么。我正在尝试在文本字段中添加“无效”类。

undefined

Answer 1

您的Javascript中存在语法错误。更正后的Javascript：

$(function() {
    $('button.btn').on('click', function() {
        if ('create_task' == $(this).val()) {
            for (var i = 0; i < $('.validate').length; i++) {
                if ("" == $('.validate').eq(i).val()) {
                    $('.validate').eq(i).addClass('invalid');
                } else {
                  $('.validate').eq(i).removeClass('invalid');
                }
            }
            return false;
        }
    });
});

在这里小提琴：https://jsfiddle.net/s9x1Ldfm/

但是我会添加返回并没有多大意义。它有时会返回false并使其他人无效。你究竟想用它做什么？

Answer 2

因此，您的代码中的问题是您缺少某些结束'）'和'}'。以下将使其正确：

$(function() {
 $('button.btn').on('click', function() {
  if ('create_task' == $(this).val()) {
    for (var i = 0; i < $('.validate').length; i++) {
      if ("" == $('.validate').eq(i).val()) {
        $('.validate').eq(i).addClass('invalid');
      } else {
        $('.validate').eq(i).removeClass('invalid');
      }
    } // end of for
  return false;
  } // end of if
 }); // end of click
});

您可以尝试通过在浏览器中使用调试器来调试您的javascript，方法是单击F12。在“元素/控制台”部分中，您可以看到代码中的错误消息。它会给你一些关于你有错误的提示。此外，如果您没有任何语法问题，则可以使用

debugger;

在您的代码中以及使用调试器模式（F12）在浏览器中运行它时，您可以逐步调试代码并查看变量的值并查看程序的行为。

但是，如果在您的代码中，您只想在用户点击按钮时查看输入文本是否为空，则可以尝试以下代码段：

<script>
$(function() {
  $('#create_task').on('click', function() {
    event.preventDefault(); // prevents submission
    if ($('.validate').val().length > 0) {
       $('.invalid').hide(); 
    } else {
       $('.invalid').show();
    }// end of if
  }); // end of click
});
</script>

<main>
  <form>
   <div class="row">
      <div class="input-field col s6">
         <input name="name" type="text" class="validate">
         <div class="invalid" style="display:none">Invalid input</div>
         <label class="active" for="task_name">Task Name</label>
      </div>
   </div>

   <button id="create_task" class="btn" type="submit" name="createTask">Create Task</button>
  </form> 
</main>

注意我如何将按钮名称更改为id以检测按钮而无需额外验证。我希望它有所帮助。

Answer 3

使用event.preventDefault()来阻止表单提交。

查看他的 fiddle 。

以下是摘录。

$('button.btn').click(function(event) {
  event.preventDefault();
  if ('create_task' == $(this).val()) {
    for (var i = 0; i < $('.validate').length; i++) {
      if ("" == $('.validate').eq(i).val()) {
        $('.validate').eq(i).addClass('invalid');
      } else {
        $('.validate').eq(i).removeClass('invalid');
      }
    }
  }
});

.invalid {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="row">
    <div class="input-field col s6">
      <input name="name" type="text" class="validate" />
      <label class="active" for="task_name">Task Name</label>
    </div>
  </div>
  <button class="btn" type="submit" value="create_task" name="createTask">Create Task</button>
</form>

Answer 4

您的代码有很多问题。首先，如果您想使用.submit功能捕获表单提交而不是单击按钮。否则，您可以删除表单标记并捕获单击按钮元素。

此外，您可以使用.each遍历jQuery对象。使用for肯定更快，因为它是本机JavaScript功能。我已就此jsfiddle进行了概念验证。

请参阅此代码。

$(function () {
	$('button.btn').on('click', function () {
		if ('create_task' == $(this).val()) {
			$('.validate').each(function (i, e) {
				if ("" == $(e).val()) {
					$('.validate').addClass('invalid');
				} else {
					$('.validate').removeClass('invalid');
				}
			})
		}
	})
});

.invalid
{
    background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
    <div class="row">
        <div class="input-field col s6">
            <input name="name" type="text" class="validate">
            <label class="active" for="task_name">Task Name</label>
                
                <input name="name" type="text" class="validate">
                <label class="active" for="task_name">Task Name</label>
                     
        </div>
    </div>
    <button class="btn" type="submit" value="create_task" name="createTask">Create Task</button>
</main>

Answer 5

您的脚本中有 尚未关闭 $(function(){语法错误。

此外，将您的返回false移至外部块（，以便您可以阻止按钮的默认提交行为）并使用submit（ 与使用.submit()方法）事件相同：

$(function() { $('button.btn').on('submit', function() { if ('create_task' == $(this).val()) { for (var i = 0; i < $('.validate').length; i++) { if ("" == $('.validate').eq(i).val()) { $('.validate').eq(i).addClass('invalid'); } else { $('.validate').eq(i).removeClass('invalid'); } } } return false; }); });

注意：如果您愿意，可以在触发type='submit'事件时将type='button'更改为click，从而避免返回{{1}在您的JavaScript代码中。

无法使简单的jQuery工作

5 个答案: