フォームの送信が成功した後のリダイレクト

Question

送信ボタンを押した後にデータを送信するフォームがあります。必要に応じていくつかの入力フィールドにタグを付けた後、送信ボタンを押した後に必要なフィールドに入力がない場合、フォームは常に私に表示されます。

私が気づいておきたいのは、提出が成功した場合、別のページにリダイレクトすることです。空白の必須フィールドがある場合は、別のページにリダイレクトせずにフォームに表示されます。今では

私は、次のコードを持っている：

は、[送信]ボタンを：

<div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
    <button type="submit" name="submityes" id="submityes" class="btn btn-danger">Submit</button> 
     </div> 
    </div> 

また、私はフォームを送信すると、別のページに私をリダイレクトするために、次のJS機能を持っています。

$('document').ready(function() { 
"use strict"; 
$(function() { 
    $('#submityes').click(function() { 
     $.ajax({ 
      type: "POST", 
      /*url: "process.php", //process to mail 
      data: $('form.contact').serialize(),*/ 
      success: function (msg) { 
       window.location.replace("/submit_resolved.php"); 
      }, 
      error: function() { 
       alert("error"); 
      } 
     }); 
    }); 
}); 

}）;

私が今問題としている問題は、すべての必須フィールドが完全であるかどうかにかかわらず、常に「submit_resolved.php」ページにリダイレクトされることです。

どのように私はこの問題を解決することができますか？すべての必須フィールドが空でない場合にのみリダイレクトする必要があります。

Answer 1

にあなたはsubmitイベント、ないclickイベントにバインドする必要がありませんフォームは有効です。

submitイベントはフォームによってトリガーされますが、clickイベントはinput要素によってトリガーされます。

Answer 2

でリダイレクトを行います。 submitイベントは場合にのみトリガされるコメントに一致するように更新

$(function() { 

    var submityesClicked; 

    //catch the click to buttons 
    $('#submityes').click(function() { 
     submityesClicked = true; 
    }); 
    $('#submitno').click(function() { 
     submityesClicked = false; 
    }); 

    $('#webform').submit(function (e) { 
     e.preventDefault();//prevent the default action 

     $.ajax({ 
      type: "POST", 
      /*url: "process.php", //process to mail 
      data: $('form.contact').serialize(),*/ 
      success: function (msg) { 
       window.location.replace(submityesClicked ? "/submit_resolved_yes.php" : "/submit_resolved_no.php"); 
      }, 
      error: function() { 
       alert("error"); 
      } 
     }); 
    }); 
}); 

：成功

$('document').ready(function() { 
"use strict"; 
$(function() { 
    $('#submityes').click(function() { 
     $.ajax({ 
      type: "POST", 
      /*url: "process.php", //process to mail 
      data: $('form.contact').serialize(),*/ 
      success: function (msg) { 
       //window.location.replace("/submit_resolved.php"); 
      }, 
      complete: function() { 
       window.location.replace("/submit_resolved.php"); 
      } 
      error: function() { 
       alert("error"); 
      } 
     }); 
    }); 
}); 

Answer 3

process.phpでフォームの検証を行っていると仮定して、process.phpから検証が失敗した場合はエラーを返す必要があります。

header('HTTP/1.1 500 Internal Server Booboo'); 
header('Content-Type: application/json; charset=UTF-8'); 
die(json_encode(array('message' => 'ERROR', 'code' => 1337))); 

チェックこのリンク：これはあなたに役に立つかもしれReturn errors from PHP run via. AJAX?

希望。それは、HTML5属性なので何JavaScriptは必要ありません

<form action="/action_page.php"> 
    Username: <input type="text" name="usrname" required> 
    <input type="submit"> 
</form> 

：あなたが行うことができます

Answer 4

最も簡単な方法は、「必要」属性あなたへの入力elements.Exampleを追加することです。また、すべての主要なブラウザでサポートされています。あなただけのフロントエンド検証に頼るべきではありません、とにかく

http://caniuse.com/#search=required

：このリンクをチェックしてください。バックエンドの入力も確認してください。

Answer 5

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <form action=""> 
      Username: <input type="text" id="usrname" required> 
      <button type="button" name="submityes" 
      id="submityes" class="btn btn-danger">Submit</button> 
     </form> 
    </div> 

function isValid(){ 
    var usrname = $("#usrname").val(); 
    if(usrname == ""){ 
     return false; 
    } 
    return true; 
} 
$(function() { 
    $('#submityes').submit(function() { 
    if(isValid() == true){ 
     $.ajax({ 
      type: "POST", 
      /*url: "process.php", //process to mail 
      data: $('form.contact').serialize(),*/ 
      success: function (msg) { 
       alert("success"); 
       window.location.replace("/submit_resolved.php"); 
      }, 
     }); 
     }else{ 
     alert("error"); 
     } 
    }); 
});