jquery - 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

jQuery メソッドを使用してイベント ハンドラーを "送信" JavaScript イベントにバインドし、.submitトリミングされた#logテキスト フィールドの値を取得して、空かどうかを確認できます。

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

フィドルのデモ

Answer 2

「必須」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

I really hate forms which don't tell me what input(s) is/are missing. So I improve the Dominic's answer - thanks for this.

In the css file set the "borderR" class to border has red color.

$('#<form_id>').submit(function () {
    var allIsOk = true;

    // Check if empty of not
    $(this).find( 'input[type!="hidden"]' ).each(function () {
        if ( ! $(this).val() ) { 
            $(this).addClass('borderR').focus();
            allIsOk = false;
        }
    });

    return allIsOk
});

Answer 4

フォーム送信イベントにハンドラーを追加する必要があります。各テキスト フィールドを確認する必要があるハンドラーでは、値が空でない場合は要素とパスワード フィールドを選択します。

$('form').submit(function() {
     var res = true;
     // here I am checking for textFields, password fields, and any 
     // drop down you may have in the form
     $("input[type='text'],select,input[type='password']",this).each(function() {
         if($(this).val().trim() == "") {
             res = false; 
         }
     })
     return res; // returning false will prevent the form from submitting.
});

Answer 5

jquery validate plugin を試す必要があります：

$('form').validate({
   rules:{
       email:{
          required:true,
          email:true
       }
   },
   messages:{
       email:{
          required:"Email is required",
          email:"Please type a valid email"
        }
   }
})

Answer 6

function isEmpty(val) {
if(val.length ==0 || val.length ==null){
    return 'emptyForm';
}else{
    return 'not emptyForm';
}

}

$(document).ready(function(){enter code here
    $( "form" ).submit(function( event ) {
        $('input').each(function(){
           var getInputVal = $(this).val();
            if(isEmpty(getInputVal) =='emptyForm'){
                alert(isEmpty(getInputVal));
            }else{
                alert(isEmpty(getInputVal));
            }
        });
        event.preventDefault();
    });
});