フォーム - ボタンの種類と必要な入力

Question

このポストは、 'ボタン'タイプのボタンでは機能しない入力です。

私はこのようになりますフォームしている：ユーザーが送信をクリックすると、フォームは、スクリプト、submit.phpを

<form action="submit.php" method="post"> 

<label for="username">Start Date</label> 
<input id="username" name="inputUsername" type="text" required> 

<button type="submit">Submit</button> 
<button type="button" onclick="updateUsername()">Update</button> 

</form> 

を実行します。

ユーザーが[更新]をクリックすると、別のスクリプトのupdate.phpのAJAX呼び出しがあります。

これらのスクリプトは、テキスト入力が空のときに[更新]ボタンをクリックすると、「このフィールドに入力してください」という警告を表示せずにすべて実行されます。それが「必須」であっても。

これは、そのタイプがボタンであり、送信していないためです。

<form action="submit.php" method="post"> 

... 

<button type="submit">Submit</button> 
<button type="submit" onclick="updateUsername()">Update</button> 

</form> 

とき私はそれは）（私のJavaScript関数updateUsernameにsubmit.phpスクリプトと私の他のスクリプトupdate.phpを実行します：私は、次のようなものを持っている場合しかし、私は2つの提出のタイプを持つことができませんupdate.phpを実行します。

ありがとうございます。 [OK]を

Answer 1

私は関数が声明があなたのAjax

Answer 2

を置く場合は、あなたが検証することができ、この中の文は、値をチェックする場合に使用する必要があるとしても、私の直接アウト検証でアヤックスを呼び出すと思いますusername入力はかどうかあなたの[ajax]にvalメソッドを使用した値があります。これは

Answer 3

を助け

$(document).ready(function() { 
    var sUserName = $('#updateUsername').val(); 
    if ($.trim(sUserName) === '') { 
     alert(''Provide a user name'); 
    } 
}); 

希望はここで、このanswerに触発醜いソリューションです。

あなたが発見したように、HTML5検証はフォームの送信時にのみ表示されます。したがって、2番目のボタンはフォームを送信する必要があります。しかし、フォームを送信すると別のスクリプトが実行されるため、そのようなことを防ぐ必要があります。

ボタンをクリックすると、onclick属性を使用してクリックされたボタンの名前を保存できます。この値をフォームのプロパティとして保存し、次のステップで取得しやすくします。次に、onsubmit属性を使用して、適切なアクションを実行するためにクリックされたボタンを特定できます。

function doAction() { 
 
    if (myform.clicked === 'update') { 
 
     updateUsername(); 
 
     // prevent form from submitting 
 
     return false; 
 
    } 
 
} 
 

 
function updateUsername() { 
 
    alert('do ajax call'); 
 
}

<form id="myform" method="post" action="submit.php" onsubmit="return doAction()"> 
 

 
<label for="username">Start Date</label> 
 
<input id="username" name="inputUsername" type="text" required> 
 

 
<button name="submit" type="submit" onclick="myform.clicked=this.name">Submit</button> 
 
<button name="update" type="submit" onclick="myform.clicked=this.name">Update</button> 
 
</form>

私はHTML5の検証を使用して避け、ちょうど私自身を書く理由です。