jsはフォームの提出上の認識を阻止します.

3830 ワード

  • 背景:テーブルの入力値に対しては、リアルタイムで入力値を監視し、即時に提示する必要があります.入力が要求に合わないと、フォームを提出できません.
  • 試行プロセス2.1.フォームの提出をフォーム上にobmitトリガイベントを作成することによって阻止したい.コードは以下の通りである.
        function check_form(){
        	  	/*
                      ,   concert       ,        
                 */
                $('tr').each(function () {
                    var user_id = this.id;
                    var concert = $('#concert_'+user_id).val()
                    if (concert !== ''){
                        if (concert >= 10 && concert <= 0) {
                            $("#span_" + assingee_id).css('display', 'block');
                            return false
                        }
                    }
                })
                var concert = $('.cencert').val()
                console.log('concert:',concert)
        	  }
    
    その位置で戻ってきたreturn falseは、フォームの提出を阻止することができませんでした.ただし、Functionの最後にreturn falseを追加すれば、フォームの提出を阻止することができますが、これは記入要求に合致していても、記入要求に適合していなくても、フォームを提出することはできません.2.2.自分でネットで対応の解決策を探していますが、調べたのは簡単なケースばかりで、自分の問題について解決することはできません.2.3.もちろん他の解決策を見つけました.考え方:check_form()にajax要求を提出し、最終的にreturnを提出することができます.これは要求を提出することもできますし、要求に合わない場合はフォームの提出を阻止することもできます.コードを添付:
    function check_form() {
                const name = $.trim($("#name").val());
               
                //       
                if (!name) {
                    alert("      !");
                    return false;
                }
                const form_data = $("#form_data").serialize();
                //          
                $.ajax({
                    url: "{% url 'bugs:project' %}",
                    data: {"form_data": form_data,'path':path, "action": action},
                    type: "post",
                    dataType: "json",
                    beforeSend: function () {
                        $("#tip").html("    ...");
                        return true;
                    },
                    success: function (data) {
                        if (data) {
                            var msg = "  ";
                            if (data == "update") msg = "  ";
                            $("#tip").html("  ," + msg + "  !");
                            alert(msg + "OK!");
                            location.reload();
                        }
                        else {
                            if (data == -2) alert("       !");
                            $("#tip").html("");
                            alert("    ");
                        }
                    },
                    error: function () {
                        alert("    !");
                    },
                    complete: function () {
                        $("#acting_tips").hide();
                    }
                });
                return false;
            }
    
    結果はこのコードが可能だと説明しましたが、今回の需要の中で使われていませんでした.3.each方法を使ってリストを巡回しました.要求に合わないなら、提示してください.sumitボタンを設定するのは選択できません.コードを添付:
    $('tr').each(function () {
                var user_id = this.id;
                concert = $('#concert_' + user_id).val();
                if (concert !== '') {
                    if (concert > 10 || concert < 0) {
                        //     
                        $('#submit').attr('disabled', 'true');
                        return false
                    } else {
                        $('#submit').removeAttr('disabled');
                    }
                }
            });
    
    **方法説明:*は自分の要求を達成しましたが、いつも普通のやり方ではないと感じています.
  • 総括感想:この問題は実に簡単に解決されましたが、自分でコードを書く最初のため、設計の需要がないので、2.3以上の方法を使って解決しませんでした.直接form postを採用して直接提出します.後ろのチェックをします.form()return falseが失敗しました.