2016-05-08 5 views
2

私はHTMLでフォームを作成し、各フィールドごとにonblurイベントを使用しており、非常にうまく動作しています。問題は、データが無効であっても送信される送信ボタン(サーブレットにデータを送信する)をクリックしたときです。ここに例があります。投稿する前にすべてのフォームデータを検証する

<html> 
<head> 
<script> 
function check() 
{ 
    if(checkName()==true) 
     return true; 
    else{ 
     alert('vhvh'); 
     return false; 
    } 
} 
function checkName() 
{ 
    var uname=document.enq.Name.value; 
    var letters = /^[A-Za-z, ]+$/; 
    if(uname.match(letters)) 
    { 
     document.getElementById('Name').style.borderColor = "black"; 
     return true; 
    } 
    else 
    { 
     document.getElementById('Name').style.borderColor = "red"; 
     //alert('Username must have alphabet characters only'); 
     //uname.focus(); 
     return false; 
    } 
} 
</script> 
</head> 
<body> 
<form name="enq" method="post" action="Enquiry" onsubmit="check()"> 
<input class="textbox" id="Name"style="margin-top:10px;font-size:16px;" type="text" name="Name" placeholder="Full Name" onblur="checkName()" required /><br><br> 
<input class="button" type="submit"> 
</form> 
</body> 
</html> 

どうすればこの問題を解決できますか?

答えて

0

フォームの送信を制御できる「オンサブミット」イベントがあります。これを使用して検証関数を呼び出すだけで、ユーザーがフォームを送信できるようにするかどうかを決定します。

<form onsubmit="return check()"> 
+0

ありがとう@Ni。今私は、データが有効かどうかをチェックする関数を作成し、それは非常にうまくいきます。しかし、まだ私はサーブレットにデータを送信することからそれを制限することができます。ここに私の新しいメソッドのコードです。 機能チェック(){ \t IF(checkName()==真&& checkNumber()==真&& ValidateEmail()== TRUE) \t \tアラート( '真'); \t else \t \t alert( 'false'); } –

+0

@ ParvenKumar関数がfalseを返す場合、フォームは送信されません。 –

+0

@ParveenKumar私はより良いサイトへの私の答えのリンクを変更しました –

0

使用

<input class="button" type="button">

とonclickのを置く:あなたはそれがフォームの送信を防ぐためにしたい場合は、以下の方法でそれを使用する必要が http://www.htmlcodetutorial.com/forms/_FORM_onSubmit.html

このようなイベント:

<input class="button" type="button" onclick="this.submit()">

あなたがそれをsubimitする前に、あなたは、データを操作することができます。

関連する問題