Question

我有一个关于使用jquery的小问题。我有以下代码：

<html> 
<head>

    <script src="jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("form").submit(function(){
       if(!$(':text').val()){
        $("span").text("sdfgsd").show();

        };return false;
      })
      });
    </script>
</head>
<body>
    <form action=""  id="ff" >
       <span></span>
        <input type="text" name="test" /> <br />
        <input type="text" name="test3" /> <br />
        <input type="checkbox" name="test2" /> <br />
        <input type="submit" value="push it" />
    </form>

</body>

问题是选择器仅为第一个文本框激活。如果在第一个文本框中输入值，则不会激活触发器。既不：文字或：输入正常工作。

有没有人有任何想法？

提前， denisr

Answer 1

匹配多个元素的jQuery选择器上的val()函数返回匹配的第一个元素的值。您需要循环遍历所有元素并检查每个元素的值。

$(document).ready(function(){
  $("form").submit(function(){
     var inputsHaveValues = true;
     $(':text').each( function() {
         if (!$(this).val()) {
            inputsHaveValues = false;
            break;
         }
     });

     if (!inputsHaveValues) {
         $("span").text("sdfgsd").show();
         return false;
     }
  })
});

Answer 2

val是破坏性方法（你不能链接到它），所以当应用于包含许多元素的对象时，必须返回一个值，它就是会为第一个做。

您应该查看each方法来遍历所有文本字段。

$('input:text').each(function(index, elm) {
  if(!$(this).val()){
    $("span").text("sdfgsd").show();
  };
});

您可以使用索引标识要在其中显示错误消息的特定span。

Answer 3

我建议你做那样的事情：

<html> 
<head>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#ff").submit(function(e) {
                $('.text-input').each(function() {
                    if ($(this).val() == '') {
                        $("#msg").text("sdfgsd");
                        e.preventDefault();
                        return false;
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form method="post" action=""  id="ff">
        <span id="msg"></span>
        <input type="text" class="text-input" name="test" /> <br />
        <input type="text" class="text-input" name="test3" /> <br />
        <input type="checkbox" name="test2" /> <br />
        <input type="submit" value="push it" />
    </form>
</body>
</html>

尝试尽可能多地使用id或class属性来访问元素，因为它更高效，更不容易出错
使用e.preventDefault()阻止提交表单
使用return false;立即退出each循环

Answer 4

尝试定义应用于每个文本的类，定义表单ID或使用每个jquery。另外，检查javascript错误。

http://api.jquery.com/jQuery.each/

Answer 5

$(document).ready(function(){
    $("#ff").submit(function(event){
        $('input[type="text"]').each(function () {
            if(!$(this).val()){
               $("span").text("Foobar");
            }
        });
       event.preventDefault();
    })
});

首先请使用 event.preventDefault();它很多优于return false;。
使用id - $(#ff) - 即时仅$('form')。
仅使用input[type="text"]

:text

使用.each() - 就像我上面有些人说的那样

jQuery选择器只选择第一个元素

5 个答案: