Как я могу проверить данные формы, если количество полей меняется каждый раз? Я отправляю данные формы, используя Ajax

Question

Я хочу подтверждение по клику. Я хочу, чтобы перед отправкой данных проверили запуск функции, если есть пустое поле, тогда показывается сообщение, и данные не следует отправлять в файл php. иначе, если нет пустых полей, тогда он должен отправить данные в php файл. Форма и функции приведены ниже

<form role="form" id="schclass_form" name="schclass_form">
   <div class="form-group">
      <label>Enter Class Name</label>
      <input class="form-control" type="text" name="class1" id="class1" placeholder="For Example: 'one'">
      </div>
      <div class="addmore">
         <button type="button" class="btn btn-default" id="addmoreclass">Add More</button>

      </div>
      <button type="button" class="btn btn-default" onClick="schclass(this.id)">Submit</button>
      <button type="reset" class="btn btn-default">Reset</button>
      </form>

function validateForm1() {
        $('#schclass_form input[type="text"]').each(function(){
        var data=""+$(this).val();
        if(data=="")
        {
            swal("Oops...", "Please fill the empty fields first", "error");
        }

        });
    }

here is function which is sending data to php file.
function schclass(a) {
            if ($("#" + a).is("[disabled=disabled]")) {
                return false
            } else {
                $("#" + a).attr("disabled", "disabled");
                swal("Wait", "Request Initiate, Please Wait....", "info");
                var b = $("#schclass_form").serialize() + "&type=schClass;
                $.ajax({
                    type: "POST",
                    url: "include/function.php",
                    data: b,
                    cache: false,
                    success: function(c) {
                        try {
                            c = JSON.parse(c)
                        } catch (d) {
                            console.log(d);
                            swal("Oops...", "Error: Wrong response", "error");
                            return;
                        }
                        if ($.trim(c.result) == "success") {
                            swal("Success", "Message: "+c.message, "success");
                        } else {
                            swal("Oops...", "Error: "+c.message, "error");
                        }
                    },
                    error: function(e, c, d) {
                        swal("Oops...", "Error: "+d, "error");
                    }
                })
            }
            $("#" + a).removeAttr("disabled");
            return false;
            }

Answer 1

Я предлагаю сделать так, чтобы функция validateForm1 () возвращала истину / ложь, если она действительна / недействительна, а затем вызывала ее из оператора if в вашей функции schclass (a), если она возвращает истину, то отправляю, иначе не отправляю.

Вот ваш код с предлагаемыми правками:

<form role="form" id="schclass_form" name="schclass_form">
   <div class="form-group">
      <label>Enter Class Name</label>
      <input class="form-control" type="text" name="class1" id="class1" placeholder="For Example: 'one'">
      </div>
      <div class="addmore">
         <button type="button" class="btn btn-default" id="addmoreclass">Add More</button>

      </div>
      <button type="button" class="btn btn-default" onClick="schclass(this.id)">Submit</button>
      <button type="reset" class="btn btn-default">Reset</button>
      </form>

function validateForm1() {
                var valid = true;
        $('#schclass_form input[type="text"]').each(function(){
        var data=""+$(this).val();
        if(data=="")
        {
                        valid = false;
        }

        });

                return valid;
    }

function schclass(a) {
            if ($("#" + a).is("[disabled=disabled]")) {
                return false
            } else {

                                if (validateForm1()) {                      
                                    $("#" + a).attr("disabled", "disabled");
                                    swal("Wait", "Request Initiate, Please Wait....", "info");
                                    var b = $("#schclass_form").serialize() + "&type=schClass;
                                    $.ajax({
                                            type: "POST",
                                            url: "include/function.php",
                                            data: b,
                                            cache: false,
                                            success: function(c) {
                                                    try {
                                                            c = JSON.parse(c)
                                                    } catch (d) {
                                                            console.log(d);
                                                            swal("Oops...", "Error: Wrong response", "error");
                                                            return;
                                                    }
                                                    if ($.trim(c.result) == "success") {
                                                            swal("Success", "Message: "+c.message, "success");
                                                    } else {
                                                            swal("Oops...", "Error: "+c.message, "error");
                                                    }
                                            },
                                            error: function(e, c, d) {
                                                    swal("Oops...", "Error: "+d, "error");
                                            }
                                    })
                                } else {
                                        swal("Oops...", "Please fill the empty fields first", "error");
                                }
            }
            $("#" + a).removeAttr("disabled");
            return false;
            }