web-dev-qa-db-ja.com

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

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();
        }
jqueryajaxjquery-validatevalidation
40
Tom

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プラグインは、検証に合格すると送信ハンドラーを呼び出します。

90
Darin Dimitrov

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

  1. フォーム送信時に、デフォルトの動作を防ぎます
  2. フォームが無効の場合、実行を停止します。

  3. それ以外の場合、有効な場合はajaxリクエストを送信します。

    $('#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);
                }

            });
        });
13
amd

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

if($("#form").validate()) {
 return true;
} else {
 return false;
}
6
Arkadiusz 'flies' Rzadkowolski

この特定の例では入力をチェックするだけですが、微調整することもできます。このようなものを.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;
    };
},
5
Erik Grosskurth

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);
                        }            
                    });
                }
            });
3
shahzad jam
> Required JS for jquery form validation
> ## jquery-1.7.1.min.js ##
> ## jquery.validate.min.js ##
> ## jquery.form.js ##

$("form#data").validate({
    rules: {
        first: {
                required: true,
            },
        middle: {
            required: true,
        },          
        image: {
            required: true,
        },
    },
    messages: {
        first: {
                required: "Please enter first",
            },
        middle: {
            required: "Please enter middle",
        },          
        image: {
            required: "Please Select logo",
        },
    },
    submitHandler: function(form) {
        var formData = new FormData($("#image")[0]);
        $(form).ajaxSubmit({
            url:"action.php",
            type:"post",
            success: function(data,status){
              alert(data);
            }
        });
    }
});
3
user3655384

私は最初にフォームを検証し、検証が合格した場合、ajaxポストを作成するよりも考えます。スクリプトの最後に「return false」を追加することを忘れないでください。

3
Mantas Vaitkūnas
function validateForm()
{
    var a=document.forms["Form"]["firstname"].value;
    var b=document.forms["Form"]["midname"].value;
    var c=document.forms["Form"]["lastname"].value;
    var d=document.forms["Form"]["tribe"].value;
    if (a==null || a=="",b==null || b=="",c==null || c=="",d==null || d=="")
    {
        alert("Please Fill All Required Field");
        return false;
    }
    else{

        $.ajax({
        type: 'post',
        url: 'add.php',
        data: $('form').serialize(),
        success: function () {
          alert('Patient added');
          document.getElementById("form").reset();
        }
      });

    }
}

  $(function () {

    $('form').on('submit', function (e) {
      e.preventDefault();

      validateForm();


    });
  });
1
luis

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

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