js - フォーム提出を防止

Question

私はボタンタイプ= "submit"で提出したフォームを取得しました。これをクリックすると、フロントエンドの検証が開始されますが、ijaxとの関係もいくつか検証されています。たとえば、他の人が使用していない名前です。

私の問題は、ボタンタイプ= "ボタン"に変更すると、フロントエンドの検証が実行されないということです。 Ajaxの検証だけでそれができます。 私は何ができますか？ P/D：jsイベントのjqueryに似たtiny.jsを使用します。

<form> 
    <input name="name" class="name"> 
    <button type="submit" class="name__valid" value="save">save</button> 
<form> 

JS

tiny.ajax("/update", 
    { 
     method: "PUT", 
     data: { 
      name: document.querySelector('name__valid').value; 
     }, 
     dataType: "json", 
     success: function (data) { 
      alert('available name'); 
      window.location = "/home?name-update=success" 
     }, 
     error: function (error) { 
      //example: used name error 
      var errorJSON = JSON.parse(error.response); 

      console.log('Messages ' + errorJSON.messages); 
     } 
    } 
); 

//this validation only it's executed by de button (type submit) 
var name = new ch.Validation(ch('.name__valid')[0], { 
    'conditions': [{ 
     'name': 'invalid-name', 
     'message': 'this name it's not valid' 
    }] 
}); 

Answer 1

あなたはフォームが送信されたときevent.preventDefaultを使用したい

のhtml。

document.querySelector('form').onsubmit = function(e) { 
    e.preventDefault(); 
    // Do your Ajax request after. 
} 

On JSBin。

Answer 2

私は、フォームの自動送信を防止するための最良の方法は以下の通りですと思う：

<form onsubmit="alert('Replace the alert with any validation code');return false;"> 
 
    <input name="name" class="name"> 
 
    <button type="submit" class="name__valid" value="save">save</button> 
 
<form>

ボタンをクリックすると、プレス時に自身が処理するフォームのイベントハンドラ入力フィールドにキーを戻します。アラート関数の呼び出しをAjaxの検証に置き換えますが、フォームの自動ポストを防止するreturn false;ステートメントを保持してください。