jQuery経由で送信せずにhtml5フォーム検証を強制する方法

アプリにこのフォームがあり、AJAX経由で送信しますが、クライアント側の検証にHTML5を使用したいと思います。したがって、おそらくjQueryを介してフォームの検証を強制できるようにしたいと思います。

フォームを送信せずに検証をトリガーしたい。出来ますか？

特定のフィールドが有効かどうかを確認するには、以下を使用します。

$('#myField')[0].checkValidity(); // returns true/false

フォームが有効かどうかを確認するには、次を使用します。

$('#myForm')[0].checkValidity(); // returns true/false

一部のブラウザー（Chromeなど）が持つネイティブエラーメッセージを表示したい場合、残念ながらこれを行う唯一の方法は、次のようにフォームを送信することです。

var $myForm = $('#myForm');

if(! $myForm[0].checkValidity()) {
  // If the form is invalid, submit it. The form won't actually submit;
  // this will just cause the browser to display the native HTML5 error messages.
  $myForm.find(':submit').click();
}

お役に立てれば。HTML5検証はすべてのブラウザでサポートされているわけではないことに注意してください。

私はこの解決策がうまくいくことを発見しました。次のようなJavaScript関数を呼び出すだけです。

action="javascript:myFunction();"

次に、html5検証があります...本当に簡単です:-)

    if $("form")[0].checkValidity()
      $.ajax(
        url: "url"
        type: "post"
        data: {

        }
        dataType: "json"
        success: (data) ->

      )
    else
      #important
      $("form")[0].reportValidity()

from：html5フォームの検証

以下のコードは私のために働きます、

$("#btn").click(function () {

    if ($("#frm")[0].checkValidity())
        alert('sucess');
    else
        //Validate Form
        $("#frm")[0].reportValidity()

});

以下は、少し一般的な方法です。

次のようなフォームを作成します（何もしないダミーのフォームにすることもできます）：

<form class="validateDontSubmit">
...

本当に送信したくないすべてのフォームをバインドします。

$(document).on('submit','.validateDontSubmit',function (e) {
    //prevent the form from doing a submit
    e.preventDefault();
    return false;
})

ここで、<a>（内に<form>）クリック時にフォームを検証する必要があるとしましょう：

$('#myLink').click(function(e){
  //Leverage the HTML5 validation w/ ajax. Have to submit to get em. Wont actually submit cuz form
  //has .validateDontSubmit class
  var $theForm = $(this).closest('form');
  //Some browsers don't implement checkValidity
  if (( typeof($theForm[0].checkValidity) == "function" ) && !$theForm[0].checkValidity()) {
     return;
  }

  //if you've gotten here - play on playa'
});

ここにいくつかのメモ：

• 検証を行うためにフォームを実際に送信する必要がないことに気づきました-への呼び出し checkValidity()で十分です（少なくともchromeでは）。他のブラウザでこの理論をテストしてコメントを追加できる人がいれば、この回答を更新します。
• 検証をトリガーするものは、内にある必要はありません<form>。これは、汎用的なソリューションを実現するためのクリーンで柔軟な方法でした。

パーティーに遅れる可能性がありますが、同様の問題を解決しようとしているときに、どういうわけかこの質問を見つけました。このページのコードが機能しなかったため、その間、指定どおりに機能するソリューションを思いつきました。

問題は、<form>DOMに単一の<button>要素が含まれていて、一度発生する<button>と、自動的にフォームの合計を生成することです。AJAXで遊ぶ場合、おそらくデフォルトのアクションを防ぐ必要があります。しかし、落とし穴があります。そうするだけで、基本的なHTML5検証も妨げられます。したがって、フォームが有効な場合にのみ、そのボタンのデフォルトを防止することをお勧めします。それ以外の場合は、HTML5検証により送信から保護されます。jQuery checkValidity()はこれに役立ちます：

jQuery：

$(document).ready(function() {
  $('#buttonID').on('click', function(event) {
    var isvalidate = $("#formID")[0].checkValidity();
    if (isvalidate) {
      event.preventDefault();
      // HERE YOU CAN PUT YOUR AJAX CALL
    }
  });
});

上記のコードにより、フォームを送信せずに、基本的なHTML5検証（タイプおよびパターンマッチングを使用）を使用できます。

「HTML5検証」とjavascript / jqueryを使用したHTMLフォームの検証の2つの異なることについて話します。

HTML5には、フォームを検証するための組み込みオプションがあります。たとえば、フィールドで「必須」属性を使用すると、（ブラウザの実装に基づいて）javascript / jqueryを使用せずにフォームの送信に失敗する可能性があります。

javascrip / jqueryを使用すると、次のようなことができます

$('your_form_id').bind('submit', function() {
   // validate your form here
   return (valid) ? true : false;
});

var $myForm = $('#myForm ');
if (!$myForm[0].checkValidity()) {
  $('<input type="submit">').hide().appendTo($myForm).click().remove();
}

送信ボタンを使用せずにフォームのすべての必須フィールドをチェックするには、以下の関数を使用できます。

必要な属性をコントロールに割り当てる必要があります。

  $("#btnSave").click(function () {
    $(":input[required]").each(function () {                     
        var myForm = $('#form1');
        if (!$myForm[0].checkValidity()) 
          {                
            $(myForm).submit();              
          }
        });
  });

これを実現するためにjQueryは必要ありません。フォームに次を追加します。

onsubmit="return buttonSubmit(this)

またはJavaScript：

myform.setAttribute("onsubmit", "return buttonSubmit(this)");

あなたの中buttonSubmitの関数（またはwhatverあなたはそれを呼び出す）、あなたは、AJAXを使用してフォームを送信することができます。buttonSubmitHTML5でフォームが検証された場合にのみ呼び出されます。

これが誰かを助ける場合、ここに私のbuttonSubmit機能があります：

function buttonSubmit(e)
{
    var ajax;
    var formData = new FormData();
    for (i = 0; i < e.elements.length; i++)
    {
        if (e.elements[i].type == "submit")
        {
            if (submitvalue == e.elements[i].value)
            {
                submit = e.elements[i];
                submit.disabled = true;
            }
        }
        else if (e.elements[i].type == "radio")
        {
            if (e.elements[i].checked)
                formData.append(e.elements[i].name, e.elements[i].value);
        }
        else
            formData.append(e.elements[i].name, e.elements[i].value);
    }
    formData.append("javascript", "javascript");
    var action = e.action;
    status = action.split('/').reverse()[0] + "-status";
    ajax = new XMLHttpRequest();
    ajax.addEventListener("load", manageLoad, false);
    ajax.addEventListener("error", manageError, false);
    ajax.open("POST", action);
    ajax.send(formData);
    return false;
}

一部のフォームには複数の送信ボタンが含まれているため、この行になりif (submitvalue == e.elements[i].value)ます。submitvalueクリックイベントを使用する値を設定します。

かなり複雑な状況で、さまざまな処理のために複数の送信ボタンが必要でした。たとえば、保存して削除します。

基本は、それも目立たないため、通常のボタンにすることはできませんでした。しかし、html5検証も利用したいと考えていました。

同様に、ユーザーがEnterキーを押して予想されるデフォルトの送信をトリガーした場合、送信イベントがオーバーライドされました。この例では保存します。

これは、JavaScriptの有無にかかわらず、HTML5検証を使用して、送信イベントとクリックイベントの両方を処理するフォームの処理の取り組みです。

jsFiddleデモ-送信とクリックのオーバーライドによるHTML5検証

xHTML

<form>
    <input type="text" required="required" value="" placeholder="test" />
    <button type="submit" name="save">Save</button>
    <button type="submit" name="delete">Delete</button>
</form>

JavaScript

//wrap our script in an annonymous function so that it can not be affected by other scripts and does not interact with other scripts
//ensures jQuery is the only thing declared as $
(function($){
    var isValid = null;
    var form = $('form');
    var submitButton = form.find('button[type="submit"]')
    var saveButton = submitButton.filter('[name="save"]');
    var deleteButton = submitButton.filter('[name="delete"]');

    //submit form behavior
    var submitForm = function(e){
        console.log('form submit');
        //prevent form from submitting valid or invalid
        e.preventDefault();
        //user clicked and the form was not valid
        if(isValid === false){
            isValid = null;
            return false;
        }
        //user pressed enter, process as if they clicked save instead
        saveButton.trigger('click');
    };

    //override submit button behavior
    var submitClick = function(e){
        //Test form validitiy (HTML5) and store it in a global variable so both functions can use it
        isValid = form[0].checkValidity();
        if(false === isValid){
            //allow the browser's default submit event behavior 
            return true;
        }
        //prevent default behavior
        e.preventDefault();
        //additional processing - $.ajax() etc
        //.........
        alert('Success');
    };

    //override submit form event
    form.submit(submitForm);

    //override submit button click event
    submitButton.click(submitClick);
})(jQuery);

JavaScriptを使用する際の注意点は、コードで各ブラウザーをサポートせずにエラーメッセージを表示するには、ブラウザーのデフォルトのonclickが送信イベントに伝播する必要があることです。それ以外の場合、クリックイベントがevent.preventDefault（）でオーバーライドされるかfalseを返すと、ブラウザの送信イベントに伝播されません。

指摘すべきことは、一部のブラウザーでは、ユーザーがEnterキーを押してもフォームの送信がトリガーされず、代わりにフォームの最初の送信ボタンがトリガーされることです。したがって、トリガーされないことを示すconsole.log（ 'form submit'）があります。

フォームを送信せずにそれを行うことができます。

たとえば、IDが「search」のフォーム送信ボタンが別のフォームにあるとします。その送信ボタンでクリックイベントを呼び出し、その後ev.preventDefaultを呼び出すことができます。私の場合、フォームAの送信からフォームBを検証します。このような

function validateFormB(ev){ // DOM Event object
  //search is in Form A
  $("#search").click();
  ev.preventDefault();
  //Form B validation from here on
}

この方法は私にとってはうまくいきます：

1. にonSubmit属性を追加します。値formに含めることを忘れないでくださいreturn。

   <form id='frm-contact' method='POST' action='' onSubmit="return contact()">

2. 関数を定義します。

   function contact(params) {
       $.ajax({
           url: 'sendmail.php',
           type: "POST",
           dataType: "json",
           timeout: 5000,
           data: { params:params },
           success: function (data, textStatus, jqXHR) {
               // callback
           },
           error: function(jqXHR, textStatus, errorThrown) {
               console.log(jqXHR.responseText);
           }
       });
   
       return false;
   }

$("#form").submit(function() { $("#saveButton").attr("disabled", true); });

ベストアンサーではありませんが、私にとってはうまくいきます。

これはすでに回答済みですが、別の解決策があります。

jqueryを使用している場合、これを行うことができます。

まずjqueryでいくつかの拡張機能を作成して、必要に応じてこれらを再利用できるようにします。

$.extend({
    bypassDefaultSubmit: function (formName, newSubmitMethod) {
        $('#'+formName).submit(function (event) {
            newSubmitMethod();
            event.preventDefault();
        }
    }
});

次に、使用したい場所でこのようなことを行います。

<script type="text/javascript">
    /*if you want to validate the form on a submit call, 
      and you never want the form to be submitted via
      a normal submit operation, or maybe you want handle it.
    */
    $(function () {
        $.bypassDefaultSubmit('form1', submit);
    });
    function submit(){ 
        //do something, or nothing if you just want the validation
    }

</script>

$(document).on("submit", false);

submitButton.click(function(e) {
    if (form.checkValidity()) {
        form.submit();
    }
});

これにより、フォームの検証を伴うネイティブHTML 5エラーメッセージが表示されました。

<button id="btnRegister" class="btn btn-success btn btn-lg" type="submit"> Register </button>



$('#RegForm').on('submit', function () 
{

if (this.checkValidity() == false) 
{

 // if form is not valid show native error messages 

return false;

}
else
{

 // if form is valid , show please wait message and disable the button

 $("#btnRegister").html("<i class='fa fa-spinner fa-spin'></i> Please Wait...");

 $(this).find(':submit').attr('disabled', 'disabled');

}


});

注： RegFormはform idです。

参照

希望は誰かを助けます。

これは、フォームの最新のJSコントロールを維持しながら、HTML5で任意のフォームの検証を実行する非常に簡単な方法です。唯一の注意点は、送信ボタンが内にある必要があること<form>です。

html

<form id="newUserForm" name="create">
Email<input type="email" name="username" id="username" size="25" required>
Phone<input type="tel" id="phone" name="phone" pattern="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" size="12" maxlength="12" required>
<input id="submit" type="submit" value="Create Account" >
</form>

js

// bind in ready() function
jQuery( "#submit" ).click( newAcctSubmit );

function newAcctSubmit()
{
  var myForm = jQuery( "#newUserForm" );

  // html 5 is doing the form validation for us,
  // so no need here (but backend will need to still for security)
  if ( ! myForm[0].checkValidity() )
  {
    // bonk! failed to validate, so return true which lets the
    // browser show native validation messages to the user
    return true;
  }

  // post form with jQuery or whatever you want to do with a valid form!
  var formVars = myForm.serialize();
  etc...
}

最善のアプローチだと思います

jQuery Validationを使用しますフォームの検証にベストプラクティスを使用プラグインを使用し、ブラウザのサポートも良好です。したがって、ブラウザの互換性の問題を心配する必要はありません。

また、選択したフォームが有効かどうか、またはフォームを送信せずに選択したすべての要素が有効かどうかをチェックするjQuery validation valid（）関数を使用できます。

<form id="myform">
   <input type="text" name="name" required>
   <br>
   <button type="button">Validate!</button>
</form>
<script>
  var form = $( "#myform" );
  form.validate();
  $( "button" ).click(function() {
    console.log( "Valid: " + form.valid() );
  });
</script>

質問によると、html5の有効性は、最初はjQueryを使用して検証できるはずです。ほとんどの回答では、これは発生していません。これの理由は次のとおりです。

html5フォームのデフォルト関数を使用して検証しながら

checkValidity();// returns true/false

このように選択すると、jQueryがオブジェクト配列を返すことを理解する必要があります

$("#myForm")

したがって、checkValidity（）関数を機能させるには、最初のインデックスを指定する必要があります

$('#myForm')[0].checkValidity()

ここに完全なソリューションがあります：

<button type="button" name="button" onclick="saveData()">Save</button>

function saveData()
{
    if($('#myForm')[0].checkValidity()){
        $.ajax({
          type: "POST",
          url: "save.php",
          data: data,
          success: function(resp){console.log("Response: "+resp);}
        });
    }
}