jquery - Ajax送信前のjQueryフォーム検証

Question

JavaScript ビット:

$(document).ready(function()
    {
            $('#form').submit(function(e)
            {     

                e.preventDefault();
                var $form = $(this);

                // check if the input is valid
                if(! $form.valid()) return false;
                    $.ajax(
                    {
                    type:'POST',
                    url:'add.php',
                    data:$('#form').serialize(),
                    success:function(response)
                    {
                        $("#answers").html(response);
                    }
                });     

            })
    });

HTML ビット:

    <input type="text" name="answer[1]" class="required" />
    <input type="text" name="answer[2]" class="required" />

これが私が使用しようとしているコードです。アイデアは、Ajax でフォームを送信する前に、すべての入力を検証することです。私は今、これの多くのバージョンを試しましたが、フォームが完全に記入されていなくても、毎回送信してしまいます. 私の入力はすべて「必須」クラスです。誰かが私が間違っていることを見ることができますか?

また、入力名はphpで生成されるため、クラスベースの要件に依存しているため、取得する名前[id]または入力タイプを確認できません。

「ページ」で質問を表示/非表示にします。

<input type="button" id="next" onClick="toggleVisibility('form3')" class="next-btn"/>

JS:

function toggleVisibility(newSection) 
        {
            $(".section").not("#" + newSection).hide();
            $("#" + newSection).show();
        }

score 112 · Accepted Answer

オプションを使用できsubmitHandlerます。基本的に、$.ajax呼び出しをこのハンドラー内に置きます。つまり、検証セットアップロジックで反転します。

$('#form').validate({

    ... your validation rules come here,

    submitHandler: function(form) {
        $.ajax({
            url: form.action,
            type: form.method,
            data: $(form).serialize(),
            success: function(response) {
                $('#answers').html(response);
            }            
        });
    }
});

検証に合格すると、jQuery.validateプラグインは送信ハンドラーを呼び出します。

score 19 · Accepted Answer

まず、jquery.validate プラグインによって自動的に検出されるclassRulesため、明示的に追加する必要はありません。requiredこのコードを使用できます：

フォーム送信時に、デフォルトの動作を防ぎます
フォームが無効な場合は、実行を停止します。
それ以外の場合は、ajax リクエストを送信します。

$('#form').submit(function (e) {
  e.preventDefault();
  var $form = $(this);

  // check if the input is valid using a 'valid' property
  if (!$form.valid) return false;

  $.ajax({
    type: 'POST',
    url: 'add.php',
    data: $('#form').serialize(),
    success: function (response) {
      $('#answers').html(response);
    },
  });
});

score 7 · Accepted Answer

あなたはやってみることができます：

if($("#form").validate()) {
 return true;
} else {
 return false;
}

score 5 · Accepted Answer

この特定の例は入力をチェックするだけですが、微調整することもできます.ajax関数に次のようなものを追加してください:

beforeSend: function() {                    
    $empty = $('form#yourForm').find("input").filter(function() {
        return this.value === "";
    });
    if($empty.length) {
        alert('You must fill out all fields in order to submit a change');
        return false;
    }else{
        return true;
    };
},

score 4 · Accepted Answer

jquery検証を使用したsubmitHandlerが良い解決策だと思います。このコードからアイデアを得てください。@Darin Dimitrov からインスパイアされました

$('.calculate').validate({

                submitHandler: function(form) {
                    $.ajax({
                        url: 'response.php',
                        type: 'POST',
                        data: $(form).serialize(),
                        success: function(response) {
                            $('#'+form.id+' .ht-response-data').html(response);
                        }            
                    });
                }
            });

score 3 · Accepted Answer

私は最初にフォームを検証し、検証に合格した場合は、ajax投稿を行うと思います。スクリプトの最後に「return false」を追加することを忘れないでください。

score 0 · Accepted Answer

有効かどうかを確認する前に、フォームの検証をトリガーする必要があります。各フィールドにデータを入力すると、フィールド検証が実行されます。フォームの検証は送信イベントによってトリガーされますが、ドキュメントレベルでトリガーされます。したがって、jquery がフォーム全体を検証する前に、イベントハンドラーがトリガーされます。しかし心配はいりません。これらすべてに対する簡単な解決策があります。

フォームを検証する必要があります。

if ($(this).validate().form()) {
  // do ajax stuff
}

https://jqueryvalidation.org/Validator.form/#validator-form()

score 0 · Accepted Answer

$("#myformId").submit(function (event) {
    // submit modal form of create & edit 
    event.preventDefault();
    formObj = $(this);
        
    // check the form input is valid or not if not valid then return false;
    if (!formObj.validate().form()) return false;

    data = $(formObj).serializeArray();

    // do stuff with ajax or anything else what you wants 
});

説明:- 最初にフォームを検証し、検証に合格した場合は ajax リクエストを呼び出します。それ以外の場合は、return false を使用して実行を停止します。

var validator = $( "#myform" ).validate();フォームを検証し、有効な場合は true を返し、そうでない場合は false を返します。したがって、確認する必要があるのはif (!formObj.validate().form())

詳細については、こちらのドキュメントを参照してください

検証機能のカスタマイズオプションを共有します

$(function () {
    $('form.needs-validation').each(function() {   // <- selects every <form> on page which contains .needs-validation class
        var validator = $(this).validate({
            errorElement: 'span',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });
    });
});

JQuery 検証のカスタマイズの詳細については、こちらを参照してください

デフォルトの検証メッセージのカスタマイズについては、以下の回答 URL を参照してください。

score -1 · Accepted Answer

フォームのネイティブ JavaScript関数は、検証checkValidityをトリガーするのに十分ですHTML5

$(document).ready(function() {
    $('#urlSubmit').click(function() {
        if($('#urlForm')[0].checkValidity()) {
            alert("form submitting");
        }
    });
});

jquery - Ajax送信前のjQueryフォーム検証

11 に答える 11

Related

Reference