通过使用.val（）返回'null'错误的表单验证通过jQuery.post

我正在构建一个登录表单，它将根据数据库验证登录，然后如果成功将用户传递给安全页面。通过使用.val（）返回'null'错误的表单验证通过jQuery.post

我已验证我的SQL是正确的，并基于我借用代码的示例，我的提交表单也应该正确。实际上，sample code在我的服务器上正常工作，这表明DOM错误。这是我跑什么的精简版本：

<script type="text/javascript" src="inc/jquery-1.7.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
jQuery.noConflict(); 
jQuery(document).ready(function() { 
    jQuery("#login_form").submit(function() { 
     jQuery("#msgbox").removeClass() 
         .addClass('messagebox') 
         .text('verifying') 
         .fadeIn(1000); 

     jQuery.post("inc/ajax_login.php", { 
      user_name: $('#username').val(), 
      password: $('#password').val() 
     }, function(data) { 
      if (data == 'yes') { /* ... */ 
      } 
      else { /* ... */ 
      } 
     }); 
     return false; 
    }); 
}); 
</script>

形式，因此运行，部分线路进一步下跌的页面：

<form action="" id="login_form" method="POST"> 
    <input type="text"  name="username" id="username" value="username" /> 
    <input type="password" name="password" id="password" value="password" /><br /> 
    <input type="hidden" name="homeDir" id="homeDir" value=""   /> <span id="msgbox"></span> <br /> 
    <input type="submit" name="Submit" id="submit" value="ENTER" class="submit"/> 
</form>

然而，JS抛出一个错误说“遗漏的类型错误：无法调用null的方法'val'。“

我在这里错过了一些东西。假设.post在表单提交之前不会被调用（并且在表单提交之前错误不会触发），为什么val()会被调用为空值？表格将填充到那时。

另外，我住在一个PHP4.4.9服务器上。据我的理解，这不是一个JSON调用（因此PHP5），但我会毫不犹豫地承认我在这里头痛。 Webdev对我来说是过去的生活，从来不是我的强项。

来源

2012-03-02 mike.thorn

你在'＃username'和'＃password'上调用'val（）'，当$ .post调用被创建时，这些DOM元素是否存在？ – frictionlesspulley 2012-03-02 17:54:05

您试图在非jQuery对象上调用val()。当您使用jQuery.noConflict模式时，'$'将不确定。尝试包装你这样的jQuery代码...

见jQuery.noConflict DOC - http://api.jquery.com/jQuery.noConflict/
各种方法使用jQuery.noConflict - http://zenverse.net/jquery-how-to-fix-the-is-not-a-function-error-using-noconflict/

<script> 

jQuery.noConflict(); 

(function($) { 
    $("#login_form").submit(function() 
    { 
     $("#msgbox").removeClass().addClass('messagebox').text('verifying').fadeIn(1000); 

     $.post("inc/ajax_login.php", { 
      user_name: $('#username').val(), 
      password: $('#password').val() 
     }, function(data) { 
      if(data=='yes') {/* ... */} 
      else {/* ... */} 
     }); 

     return false; 
    }); 
})(jQuery); 

</script>

来源

2012-03-02 17:56:58

缺少'jQuery（函数（$）'有点杀死了我（自我标记的noob），但是一旦我得到了它，它就像一个梦一样。非常感谢！ – 2012-03-02 18:52:45

@ mike.thorn没问题，很高兴帮助：） – 2012-03-02 19:35:49

您可以使用此也

<script> 

jQuery.noConflict(); 


jQuery("#login_form").submit(function() 
{ 
    jQuery("#msgbox").removeClass().addClass('messagebox').text('verifying').fadeIn(1000); 

    jQuery.post("inc/ajax_login.php", { 
     user_name: jQuery('#username').val(), 
     password: jQuery('#password').val() 
    }, function(data) { 
     if(data=='yes') {/* ... */} 
     else {/* ... */} 
    }); 

    return false; 
}); 

</script>

来源

2012-04-27 14:32:46

你应该添加一些元文本 – keyser 2012-10-28 10:27:25

通过使用.val（）返回'null'错误的表单验证通过jQuery.post

回答

相关问题