表单提交时出现jquery错误

Question

有一个注册表，我检查用户名是否可用。 如果可用，则在用户名字段旁边显示一个段落（“可用！”），如果没有，则显示（“不可用！”）。 如果用户名不可用，我不想提交。

<script type ="text/javascript">

$(function(){
    $('#usernameFeedback').load('check.php').show();

    $('#usernameID').keyup(function(){

        $.post('check.php',{username:registration.username.value},
        function(result){
            $('#usernameFeedback').html(result).show();
            var feedVar = $('#usernameFeedback').text();

        });
    });
});
</script>


<script>

$(document).ready(function(){
   $("#regForm").submit(function(){
     alert("HELLO"); // works fine
     if ( $('#usernameFeedback').text() == "Not available!" )
        return;
   event.preventDefault();
   });
});

</script>

使用此代码无法正常工作（我是jquery的新手），如果用户名不可用，则不会停留在当前页面中。

Answer 1

将事件传递给函数。

$("#regForm").submit(function(){

应该

$("#regForm").submit(function(event){

并且在if的同一行使用return false ，因为你没有使用{}

试试这段代码：

$(document).ready(function () {
    $("#regForm").submit(function (event) {
        event.preventDefault();
        alert("HELLO"); // works fine
        if ($('#usernameFeedback').text() == "Not available!") {return false;}
    });
});

Answer 2

没有大括号的if()语句只会监听它下面的第一个且唯一的语句。 如果包含大括号，则可以有多个语句，如下所示：

   if ( $('#usernameFeedback').text() == "Not available!" ) {
          event.preventDefault();
          return false;
      } else {
          return true;
      }

此外， event.preventDefault()将不会使用您当前的代码执行，因为函数在它甚至能够执行之前就已经离开了，因此我已经交换了它们，默认情况下会阻止它， 然后返回。

塞尔吉奥迅速而正确地提到，将event添加到功能中，甚至首先允许你使用event.preventdefault() ！