2016-10-03 21 views
-1

私のJSPフォームを検証したいと思います。JavaScriptの検証はHTMLフォームでは機能しません

マイなtest.jspページは

<%@ page import="java.util.Date" %> 
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Test</title> 
<script> 
    function validateForm() { 
     var address = document.getElementById("txtAddress"); 
     alert("Address : " + address); 
     if (address == null || address == "") { 
      alert("Enter Address"); 
      return false; 
     } 

     var city = document.getElementById("txtCity"); 
     if (city == null || city == "") { 
      alert("Enter City"); 
      return false; 
     } 
    } 
</script> 
</head> 
<body> 
    <form name="TestForm1" action="loginServlet" method="post" onsubmit="return validateForm();"> 
     <table> 
      <tr> 
       <td>Address :</td> 
       <td><input type="text" name="txtAddress" value="${reqObj.address}" /></td> 
       <td>City :</td> 
       <td><input type="text" name="txtCity" value="${reqObj.city}" /></td> 
      </tr> 
      <tr align="left"> 
       <td colspan="4"><input type="submit" value="Submit" /></td> 
      </tr> 
     </table> 
     <% 
      String createdDate = ""; 
      Date dt = new Date(); 
      createdDate = dt.toString(); 
      System.out.println("currentTime>>>>" + createdDate); 
     %> 
    </form> 
</body> 
</html> 

問題の下に与えられているがある、というのが私なtest.jspフォームが空のアドレスフィールドに表示され、このプロジェクトを実行して、私はボタンアラートを送信をクリックすると、「表示され 住所:ヌル」

しかし、私は、アドレステキストボックスフィールド上のいくつかの値を書くとき、私はそれが私を示す再送信ボタンをクリックした 『住所:ヌル』

私は、Eclipse火星で1

をJAVAを使用しています
+0

あなたはidで値を取得しようとしているが、あなたは、inputタグ –

答えて

1

に対処するためのIDを追加します。

<input type="text" name="txtAddress" value="${reqObj.address}" /> 

idid="txtAddress")ATTRを追加し、その後document.getElementById("txtAddress");

<input type="text" id="txtAddress" name="txtAddress" value="${reqObj.address}" /> 

を使用して、あなただけ使用して取得することができますidいずれかを使用していないlengthの代わりnull""

if(address.value.trim().length == 0) 

をチェックできますclass,name,tag

  • document.getElementById("xyz");

  • document.getElementsByTagName("p");

  • document.getElementsByClassName("abc");

  • document.getElementsByName("xyz");

更新:主にあなたは値そのelement.Takeのvalueを取って行方不明、その後、あなたが代わりにHTML5の検証を使用することができます

address.value.trim().length

+0

"" – user3441151

+0

はい正確に正しい...のような名前と同じid属性を追加できます。 –

+0

が動作しない [アドレス]フィールドのテキストボックスが空白で、[送信]ボタンをクリックしたとき アラート= "アドレス:[オブジェクトHTMLInputElement] " を呼び出し、loginServletを呼び出します。 var address = document.getElementById( "txtAddress"); alert( "住所:" +住所); if(address.trim()。length == 0){ \t alert( "Enter Address"); \t falseを返します。 } <入力タイプ= "テキスト" id = "txtAddress" name = "txtAddress" value = "$ {reqObj.address}" /> – user3441151

1

document.getElementById()を使用していてidが見つからないため、入力タグのIDを定義するため、毎回nullが返されます。

+0

ないあなたをdownvoting 1のどこにでもイドを定義していないが、私はあなたが問題を説明しなければならないので、やった1だったと思います)ただ – AxelH

+0

より良い:)あなたはそれを使ってコードを入れることができます(この例ではID付きの入力例です)が、コードは役に立ちません。 (私は助けにあなたに+1を与えた、私はもう一度彼のdownvoteを取り除くためにもう一度渡すことを疑う) – AxelH

+1

私は確かに次回から心に留めておく。 –

1

アドレス入力のIDがありません。代わりにdocument.getElementsByName(name)を使用できます。

var address = document.getElementsByName("txtAddress")[0]; 

もしくはませid属性は、JSP内に存在しない要素

<input type="text" id="txtAddress" value="${reqObj.address}" /> 
0

を確認しています。ここでは、ID名としてではなく、 "txtAddress" を指定している同じ https://jsfiddle.net/ianoxley/VY8KU/

<input type="text" name="txtAddress" required> 
0

ためjfiddleです。

<input type="text" id="txtAddress" name="txtAddress" value="${reqObj.address}" /> 

を次のようにIDを追加する興味がないと、あなたが名前でtxtAddress値にアクセスしたい場合は、それにIDを作成することによって要素にアクセスしてみてください、その後の行を変更

を次のようにjavascript関数
var address = document.TestForm1.txtAddress; 

ここのアドレスはまだオブジェクトです。入力タイプのバリデーションをチェックするときは、直接オブジェクトをチェックするのではなく、object.valueを指定してください。例の場合:

var address = document.TestForm1.txtAddress.value; 
関連する問題