不能使简单的jQuery工作

Question

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

<script src="../jquery/jquery-1.8.2.js"></script> 
<script src="../jquery/jquery.ui.effect.js"></script> 
<script> 
    $(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; 
    }   
    }); 
</script> 
<main> 
    <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> 
</main> 

Answer 1

使用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 2

有在你的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/

不过，我想补充的回报不使一个很大的意义。它有时会返回假而使其他人无效。你到底想要做什么？

Answer 3

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

此外，您可以使用.each循环浏览jQuery对象。由于它是一种本地JavaScript功能，因此使用它肯定更快。我在这个jsfiddle上做了一个概念验证。

请参阅此代码。

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

.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 4

所以，在你的代码的问题是，你是缺少一些结束的 '）' 和 '}'。下面将使其正确：

$(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 
}); 

您可以尝试通过在浏览器中的调试器，点击F12调试你的JavaScript。在Element/Console部分中，您可以看到代码中的错误消息。它会给你一些关于你有错误的提示。另外，如果你没有任何语法问题，你就可以使用

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 5

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

而且移动你的回报假于外块（，让你阻止默认提交按钮的行为）和使用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事件，从而摆脱你的RET在您的JavaScript代码中使用false。