Jquery表单提交以检查空字段

Question

如何在不加载的情况下提交时,如何使用jquery检查文本字段是否为空login.php？

<form action="login.php" method="post">
    <label>Login Name:</label>
    <input type="text" name="email" id="log" />
    <label>Password:</label>
    <input type="password" name="password" id="pwd" />
    <input type="submit" name="submit" value="Login" />
</form>

谢谢.

Answer 1

你可以这样做:

//  Bind the event handler to the "submit" JavaScript event
$('form').submit(function () {

    // Get the Login Name value and trim it
    var name = $.trim($('#log').val());

    // Check if empty of not
    if (name  === '') {
        alert('Text-field is empty.');
        return false;
    }
});

FIDDLE DEMO

Answer 2

您可以使用'required'http://jsbin.com/atefuq/1/edit

<form action="login.php" method="post">
    <label>Login Name:</label>
    <input required type="text" name="email" id="log" />
    <label>Password:</label>
    <input required type="password" name="password" id="pwd" />
    <input  required type="submit" name="submit" value="Login" />
</form>

Answer 3

一个简单的解决方案就是这样

$( "form" ).on( "submit", function() { 

   var has_empty = false;

   $(this).find( 'input[type!="hidden"]' ).each(function () {

      if ( ! $(this).val() ) { has_empty = true; return false; }
   });

   if ( has_empty ) { return false; }
});

注意:该jQuery.on()方法仅适用于jQuery 1.7+版本,但它现在是附加事件处理程序的首选方法.

此代码循环遍历表单中的所有输入,并通过返回false来阻止表单提交,如果它们中的任何一个没有值.请注意,它不会向用户显示有关表单无法提交的原因的任何消息(我强烈建议添加一个).

或者,您可以查看jQuery validate插件.它做到了这一点,还有更多.

注意:此类技术应始终与服务器端验证结合使用.