空のテキストフィールドの表示エラーメッセージを確認します。

jqueryを使用して転記する前に、投稿フォームのテキストフィールドが空であるかどうかを確認したいと思います。もしあれば、私はテキストエリアのすぐ横にエラーメッセージを表示したいと思います。空のフィールドを使って情報を送信するためにボタンをクリックしますが、メッセージは表示されません。転記が実行される前に、このチェック機能が必要です。ここに私がしたことがあります。空のテキストフィールドの表示エラーメッセージを確認します。

<!DOCTYPE html> 
    <html> 
    <head> 
    <script src="jquery-1.7.1.min.js"></script> 
    <script> 
    function ValidateForm() 
    { 
     $(document).ready(function(
       { 
        $("#personID").each(function() 
         { 
          if(this.val()=="") 
          { 
           $("#error_msg").html("Field needs filling"); 
          }    
         }  
       } 
     )); 

    } 


    </script> 
    </head> 
    <body> 
    <form action="action.php" method="post" id="personID"> 
    First Name: <input type="text" name="first"><span id="error_msg"></span></br> 
    Last Name: <input type="text" name="last"><span id="error_msg"></span></br> 
    Phone: <input type="text" name="phone"><span id="error_msg"></span></br> 
    Mobile: <input type="text" name="mobile"></br> 
    Position: <input type="text" name "pos"><span id="error_msg"></span></br> 
    <input type="button" value="Insert" onclick="ValidateForm"> 
    </form> 
    </body> 
    </html>

出典

2012-01-20 Mackintoast

あなたの質問は？ – cambraca

機能は

function ValidateForm() 
{ 
    $('span.error_msg').html(''); 
    var success = true; 
    $("#personID input").each(function() 
     { 
      if($(this).val()=="") 
      { 
       $(this).next().html("Field needs filling"); 
       success = false; 
      } 
    }); 
    return success; 
}

をする必要がありますし、あなたのフォームはあなたの携帯電話のテキストボックスに次のいずれかのスパンを追加しませんでした

<form action="action.php" method="post" id="personID" onsubmit="return ValidateForm();"> 
    First Name: <input type="text" name="first"><span class="error_msg"></span></br> 
    Last Name: <input type="text" name="last"><span class="error_msg"></span></br> 
    Phone: <input type="text" name="phone"><span class="error_msg"></span></br> 
    Mobile: <input type="text" name="mobile"></br> 
    Position: <input type="text" name "pos"><span class="error_msg"></span></br> 
    <input type="submit" value="Insert"> 
</form>

すべきであり、それが空のままであれば、フォームはされませんエラーメッセージも表示されませんので、ご注意ください。オプションのままにしたい場合は、クラスを(class='optional')に追加し、if($(this).val()=="")をif($(this).val()=="" && !$(this).hasClass('optional'))に変更してください。それでおしまい。

出典

2012-01-20 23:24:11

この...

if(this.val()=="")

は、このする必要があります...

if($(this).val()=="")

またはこの...

if(!$(this).val())

またはこの...

関数に（要素への参照である） thisを渡す

要素を参照するjQueryオブジェクトを返します。

これで、.val()のようなjQueryメソッドを呼び出すことができます。

実際には構文が乱雑になっています。フォームが送信されるまで、コードが実行されませんので、

は $(document).ready()のために...これに

function ValidateForm() { 
    if($("#personID").val()=="") { 
     $("#error_msg").html("Field needs filling"); 
    }    
}

必要がありませんが、あなたのコードを変更し

。

出典

2012-01-20 22:45:59

フォーム内でonsubmitイベントを使用できます。は、あなたが変更してください：

<input type="button" value="Insert" onclick="ValidateForm"><input type="submit" value="Insert">

<form action="action.php" method="post" id="personID">に以下<form action="action.php" method="post" id="personID" onsubmit="return ValidateForm();">

完全なコードに：

function ValidateForm() 
{ 
    $('span.error_msg').html(''); 
    var success = true; 
    $("#personID input").each(function() 
     { 
      if($(this).val()=="") 
      { 
       $(this).next().html("Field needs filling"); 
       success = false; 
      } 
    }); 
    return success; 
} 


<form action="action.php" method="post" id="personID" onsubmit="return ValidateForm();"> 
First Name: <input type="text" name="first"><span class="error_msg"></span></br> 
Last Name: <input type="text" name="last"><span class="error_msg"></span></br> 
Phone: <input type="text" name="phone"><span class="error_msg"></span></br> 
Mobile: <input type="text" name="mobile"></br> 
Position: <input type="text" name="pos"><span class="error_msg"></span></br> 
<input type="submit" value="Insert"> 
</form>

EDIT非常に良い点ヒラ、私は本当に注意を払っていませんでしたその問題に;-)コードを修正しました。

出典

2012-01-20 22:59:46

Rick Kuipersはすでに良い解決策を示していましたが、私は彼がスパンの "error_msg"がクラスではなくidとして宣言されていることに気付かなかったと思います。それは正しく動作しません。つまり、最初のスパンにはエラーメッセージが表示されます。これを修正するには、 "error_msg"スパンでidの代わりにclassを使用する必要があります。 –

良い点！エラーメッセージよりも提出を解決することにもっと注意を払っていました;-) あなたのコードに合わせてコードを修正しました。ありがとうございます。 –

ありがとうございました。私たちはよく間違いを犯します。 –

空のテキストフィールドの表示エラーメッセージを確認します。

答えて

関連する問題