How can I validate form data if the number of fields changed every time? I am sending form data using Ajax

Question

I want validation onclick. I want that before sending data, validate function run, if there is an empty field then it show amessage and data should not be send to php file. else if there is no empty fields then it should send data to php file.Form and functions are given below

<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

I suggest making the validateForm1() function return true/false if valid/invalid, then calling it from an if statement in your schclass(a) function, if it returns true then submit, else don't submit.

Here is your code with the suggested edits:

<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;
            }