<input typr="text" required />を活かしつつ、submitをコントロールしたい

Question

htmlのinputのプロパティのrequiredを活かしつつ、submitをjavascriptでコントロールしようとしております。
下記のコードの様に、もし非同期でdataに"fail"を受け取った場合、ページが遷移しない様にsubmitをキャンセルする$("#marker_form").submit(function(){return false});を入れているのですが、これを実装するとrequiredが適用されません（具体的にはこのフィールドを入力してくださいのポップアップが出現しない）
もちろん、requiredを使わずにjsでrequiredに相当する部分をコントロールできるのですが、
①htmlのdefault機能であるrequiredを利用したいと考えています
②かつ、dataにfailを受け取った場合、action="#"の遷移をしない様にしたい
これを実装することは可能でしょうか？

よろしくお願いもうしげます。

form id="marker_form" method="post" action="#">
 <input type="text" name="title" class="form title" maxlength="12" required placeholder="XXX"/></div>
 <button type="submit" id="submit_marker" name="submit_marker" class="form-btn semibold submit-btn">SUBMIT</button>
</form>

$('#submit_marker').on('click',function(){
   markerAjax();
})

function markerAjax () {
  var mode = $('input[name="mode"]').val();

$.ajax({
  type:'POST',
  url:'./ajax/marker.php',
  dataType:"json",
  data:{
    mode:mode
  }
}).done(function(data){
   if (data=="fail") {
    $("#marker_form").submit(function(){return false});
    alert("error")
    // $("#marker_form").submit();
  }else{
    console.log(data);
  }
})

Answer 1

ajaxでおくるのはsubmitではないのでrequiredは意味がありません
制限につかうならrequiredでtext()==""のlength>0のときに
ajaxを発動しないことです

Answer 2

reportValidityメソッドを利用すれば可能かと思います。
やりたいことが以下のようなことではないかと思うのですが、あっていますでしょうか。

$('#submit_marker').on('click',function(e){
   markerAjax();
})

function markerAjax () {
  var mode = $('input[name="mode"]').val();

$.ajax({
  type:'POST',
  url:'./ajax/marker.php',
  dataType:"json",
  data:{
    mode:mode
  }
}).done(function(data){
   if (data=="fail") {
+     $("#marker_form")[0].reportValidity();
    $("#marker_form").submit(function(){return false});
    alert("error")
    $("#marker_form").submit();
  }else{
    console.log(data);
  }
})

HTMLFormElement.reportValidity() - form要素の入力内容の検証と報告を実行する

Comments

[pegy]

コメントありがとうございます。実装することができました！