單擊按鈕后，如何在發送ajax之前調用我的validate函數？

Question

大家好，我有一個從數據庫動態生成的表。 這是桌子 。

我擁有所有可以正常工作的代碼，但我只需要適當的執行時間即可1）檢查是否在單擊按鈕時填充了所有必填字段，如果沒有，則不發送ajax。 2）在按鈕上填充所有必填字段后，單擊，然后調用ajax並將適當的值發送到c＃，然后再發送到數據庫。

首先，我需要檢查是否所有必填字段都已填寫（檢查必填列（是或否）：

$(function () {
              $("#myButton").on("click", function () {
                  // Loop all span elements with target class
                  $(".IDMandatory").each(function (i, el) {
                      // Skip spans which text is actually a number
                      if (!isNaN($(el).text())) {
                          return;
                      }

                      // Get the value
                      var val = $(el).text().toUpperCase();
                      var isRequired = (val === "TRUE") ? true :
                                       (val === "FALSE") ? false : undefined;

                      // Mark the textbox with required attribute
                      if (isRequired) {
                          // Find the form element
                          var target = $(el).parents("tr").find("input,select");

                          if (target.val()) {
                              return;

                          }
                          // Mark it with required attribute
                          target.prop("required", true);

                          // Just some styling
                          target.css("border", "1px solid red");

                      }
                  });
              })
          });

如果沒有，請不要調用ajax並發送值。 如果所有字段都已填充，則調用ajax將值發送到c＃。 這是ajax代碼，它從字段和表中獲取值，並將其發送到c＃WebMethod，然后發送到數據庫。

 $(function () {

            $('#myButton').on('click', function () {



                var ddl = $('#MainContent_ddlBusinessCenter').val()

                var myCollection = [];

                $('#MainContent_gvKarakteristike tbody').find('tr:gt(0)').each(function (i, e) {
                    var row = $(e);
                    myCollection.push({
                        label: valuefromType(row.find(row.find('td:eq(1)').children())),
                        opis: valuefromType(row.find(row.find('td:eq(3)').children()))
                    });

                });

                console.log(myCollection);
                function valuefromType(control) {
                    var type = $(control).prop('nodeName').toLowerCase();


                    switch (type) {
                        case "input":
                            return $(control).val();
                        case "span":
                            return $(control).text();
                        case "select":
                            ('Selected text:' + $('option:selected', control).text());
                            return $('option:selected', control).text();
                    }
                }
                var lvl = $('#MainContent_txtProductConstruction').val()
                if (lvl.length > 0) {
                    $.ajax({
                        type: "POST",
                        url: "NewProductConstruction.aspx/GetCollection",
                        data: JSON.stringify({ 'omyCollection': myCollection, 'lvl': lvl, 'ddl': ddl }),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",

                        success: function (response) {
                            if (parseInt(response.d) > 0)
                                alert("Saved successfully.");
                            else
                                alert("This object already exists in the database!");
                            console.log(response);
                            location.reload(true);
                        },
                        error: function (response) {
                            alert("Not Saved!");
                            console.log(response);
                            location.reload(true);
                        }
                    });
                }
                else {
                    alert("Please fill in the Product Construction field!")
                }
            });

        });

我需要代碼來執行第一個必填字段，當它們全部填寫后，再調用代碼的ajax部分！ 誰能幫忙！ 如果您需要更多說明，請詢問！ 提前致謝 ！

更新Liam幫助分配了我，但是ajax在單擊按鈕時不起作用。

function validate() {

    // Loop all span elements with target class
    $(".IDMandatory").each(function (i, el) {
        // Skip spans which text is actually a number
        if (!isNaN($(el).text())) {
            return;
        }

        // Get the value
        var val = $(el).text().toUpperCase();
        var isRequired = (val === "TRUE") ? true :
                         (val === "FALSE") ? false : undefined;

        // Mark the textbox with required attribute
        if (isRequired) {
            // Find the form element
            var target = $(el).parents("tr").find("input,select");

            if (target.val()) {
                return;

            }
            // Mark it with required attribute
            target.prop("required", true);

            // Just some styling
            target.css("border", "1px solid red");

        }
    });
}



function sendAjax() {
    var ddl = $('#MainContent_ddlBusinessCenter').val()

    var myCollection = [];

    $('#MainContent_gvKarakteristike tbody').find('tr:gt(0)').each(function (i, e) {
        var row = $(e);
        myCollection.push({
            label: valuefromType(row.find(row.find('td:eq(1)').children())),
            opis: valuefromType(row.find(row.find('td:eq(3)').children()))
        });

    });

    console.log(myCollection);
    function valuefromType(control) {
        var type = $(control).prop('nodeName').toLowerCase();


        switch (type) {
            case "input":
                return $(control).val();
            case "span":
                return $(control).text();
            case "select":
                ('Selected text:' + $('option:selected', control).text());
                return $('option:selected', control).text();
        }
    }
    var lvl = $('#MainContent_txtProductConstruction').val()
    if (lvl.length > 0) {
        $.ajax({
            type: "POST",
            url: "NewProductConstruction.aspx/GetCollection",
            data: JSON.stringify({ 'omyCollection': myCollection, 'lvl': lvl, 'ddl': ddl }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",

            success: function (response) {
                if (parseInt(response.d) > 0)
                    alert("Saved successfully.");
                else
                    alert("This object already exists in the database!");
                console.log(response);
                location.reload(true);
            },
            error: function (response) {
                alert("Not Saved!");
                console.log(response);
                location.reload(true);
            }
        });
    }
    else {
        alert("Please fill in the Product Construction field!")
    }
}


$(function () {
    $('#myButton').on('click', function () {
        if (validate()){
            sendAjax();
        }
    })



});

Answer 1

如果要按順序執行這些命令，為什么不添加一個調用每個函數的單擊處理程序：

function validate(){
    // Loop all span elements with target class
    $(".IDMandatory").each(function (i, el) {
       // Skip spans which text is actually a number
      ....etc.
}

function sendAjax(){
   var ddl = $('#MainContent_ddlBusinessCenter').val()
   var myCollection = [];
   ..etc.
}

$(function () {
     $('#myButton').on('click', function () {
        validate();
        sendAjax();
     }
});

如果您的表單也有效，則您的validate函數實際上返回true或false似乎很有意義。 那么您可以：

$(function () {
     $('#myButton').on('click', function () {
        if (validate()){
           sendAjax();
        }
     }
});

我不太確定為什么要這么做：

// Mark it with required attribute
target.prop("required", true);

當您驗證？ 如果只是將其添加到HTML中，它將處理必需的內容。 在這里添加它似乎有點奇怪。 我猜您實際上沒有提交表格嗎？ 自己添加驗證消息比使用此屬性更有意義。

您的代碼無效，因為您沒有從validate函數返回任何內容。 我尚不清楚100％有效和無效，因此我無法更改。 但是您需要添加return true; 對於有效情況， return false; for if語句if (validate()){無效的情況下工作。