不能使簡單的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。