javascript - 如果每次更改字段数，如何验证表单数据？我正在使用 Ajax 发送表单数据

Question

我想要验证 onclick。我希望在发送数据之前验证函数运行，如果有一个空字段，那么它会显示消息并且数据不应该发送到 php 文件。否则，如果没有空字段，则应将数据发送到 php file.Form 和函数如下所示

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

标签： javascriptphpjqueryajax

Answer 1

我建议让 validateForm1() 函数在有效/无效时返回 true/false，然后从 schclass(a) 函数中的 if 语句调用它，如果返回 true 然后提交，否则不提交。

这是带有建议编辑的代码：

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