javascript - 如何从 jquery 的下拉列表中选择动态创建的文本框的验证？

我有一个名为“标签”的文本框和另一个名为“验证”的选择框。当我单击“添加”按钮时，文本框“标签”的值将附加到左侧的表单中，其中包含新创建的文本框 like this .

现在我想做的是，我尝试从右侧表单中的选择框中可用的验证选项列表(字母或数字)向动态创建的文本框添加验证。

即，当我输入“新时代”并选择“数字”作为验证时，左侧表单上创建的“新时代:”文本框仅在输入为数字时才应提交。否则显示错误。

提前致谢。

<!DOCTYPE html>
<html>
<head>
    <!--<link rel="stylesheet" href="styless.css">-->
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script>
      var Errors = [];
    </script>
    <script src="newfunc.js"></script>
    <script>
      $(document).ready(function () {
        $("#name").on("input", function () {
          nameCheck();
        });

        $("#age").on("input", function () {
          ageCheck();
        });

        $("#gender").on("input", function () {
          genderCheck();
        });

        $("#vehicle").on("input  ", function () {
          vehicleCheck();
        });

        $("#cars").on("input", function () {
          carsCheck();
        });

        var x = 1;

        function appendRow() {
          var d = document.getElementById('divis');
          d.innerHTML += "<input type='text' id='tst" + x++ + "'><br >";
        }

        $("form[name='form1']").on("submit", function (event) {
          if (!nameCheck()) {
            Errors.push("Please enter a valid name");

            event.preventDefault();
          }
          if (!ageCheck()) {
            Errors.push("Please enter a valid age");
            event.preventDefault();
          }

          if (!genderCheck()) {
            Errors.push("Please select gender");
            event.preventDefault();
          }

          if (!carsCheck()) {
            Errors.push("Please select a valid make");
            event.preventDefault();
            console.log(Errors);
          }

          if (!vehicleCheck()) {
            Errors.push("Please check a mode");
            event.preventDefault();
          } else {

            $(this).trigger("submit");
          }
        });

        $("form[name='form2']").on("submit", function (event) {

          var lab = $("#label").val();
          $('#divis').append(lab);

          appendRow();

          $('#ol_div').append($('#todd'));

          // $('#dono').remove();

          event.preventDefault();

        });
      });
    </script>
    <style>
        .error p {
            display: inline-block;
            color: red;
        }

        form p {
            display: none;
        }

        .inlineinput div {
            display: inline;
        }

        .one {
            display: inline;
        }

        .two {
            display: inline;
        }
    </style>
</head>
<body>
<div class="main" style="width:100%;">
    <div id="old_div" style="float:left; width:50%;">
        <form name="form1" action="fun.php" method="post" onsubmit="validateAllInputBoxes(event);">
            <div class="name">
                <label>Name : </label>
                <input id='name' name='dedede' type='text'><br>
                <p id="p1"></p>
            </div>
            <br>
            <div class="age">
                <label>Age : </label>
                <input id='age' name='subject' type='text'><br>
                <p id="p2"></p>
            </div>
            <br>
            <div class="gender">
                <label>Gender : </label>
                <input id='gender' type='radio' name='sel' value='male'>Male
                <input id='gender' type='radio' name='sel' value='female'>Female<br>
                <p id="p3"></p>
            </div>
            <br>
            <div class="vehicle">
                <label>Vehicle : </label>
                <input type="checkbox" id="vehicle" name='vehicle' value="Car">Car
                <input type="checkbox" id="vehicle" name='vehicle' value="Bike">Bike
                <input type="checkbox" id="vehicle" name='vehicle' value="Other">Other<br>
                <p id="p4"></p>
            </div>
            <br>
            <div class="cars">
                <label>Car Make:</label>
                <select name="cars" id="cars" ">
                <option value="-1" selected disabled="disabled">Choose an option</option>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="fiat">Fiat</option>
                <option value="audi">Audi</option>
                </select>
                <br>
                <p id="p5"></p>
            </div>
            <br>
            <div id="ol_div">
            </div>
            <div>
                <button id="submit" class="sendButton">Submit</button>
            </div>
        </form>
        <br/>
    </div>
    <div style="float:right; width:50%; ">
        <div id="new_div">
            <form name="form2" method="post">
               <span class="inlineinput">
                  <div class="name">
                     <label>Label : </label>
                     <input id='label' name='dedede' type='text'>
                  </div>
               </span>
                <span class="inlineinput">
                  <div class="name">
                     <label>Validation:</label>
                     <select name="vali" id="vali" ">
                        <option value="-1" selected disabled="disabled">Choose an option</option>
                        <option value="1">Numerics</option>
                      </select>
                  </div>
               </span>
                <span class="inlineinput">
                  <div>
                     &nbsp;&nbsp;&nbsp;<button id="dono" class="newButton">Add</button>
                  </div>
               </span>
                <br>
                <br>
                <div id="todd">
                    <div class="one" id="labe"></div>
                    <div class="two" id="divis"></div>
                    <br><br>
                </div>
                <br>
            </form>
        </div>
    </div>
</body>
</html>

newfunc.js

function nameCheck() {
    var name = $('#name').val();
    var name_regex = /^[A-z]+$/;
    if (!name_regex.test(name)) {

        $('#p1').text("* Please enter a valid name *");
        $("#name").parents(".name").addClass("error");
        return false;
    } else {
        $("#name").parents(".name").removeClass("error");
        return true;
    }
}

function ageCheck() {
    var age = $('#age').val();
    var age_regex = /^[0-9]+$/;
    if (!age_regex.test(age)) {
        //Errors.push("Please enter a valid age");
        $('#p2').text("* Please enter a valid age *");
        $("#age").parents(".age").addClass("error");
        return false;
    } else {
        $("#age").parents(".age").removeClass("error");
        return true;
    }
}

function labelCheck() {
    var label = $('#label');

    if (label.val().length > 0) {
        //Errors.push("Please enter a valid age");
        $('#p2').text("* Please enter a valid label *");
        $("#label").parents(".label").addClass("error");
        return false;
    } else {
        $("#label").parents(".label").removeClass("error");
        return true;
    }
}

function genderCheck() {
    var gender = $('#gender').val();

    if ($('input[type=radio]:checked').length <= 0) {
        //Errors.push("Please select Gender");
        $('#p3').text("* Please select the Gender *");
        $("#gender").parents(".gender").addClass("error");
        return false;
    } else {
        $("#gender").parents(".gender").removeClass("error");
        return true;
    }
}

function vehicleCheck() {

    var vehicle = $('#vehicle').val();

    if ($('input[id=vehicle]:checked').length == 0)

    {
        //Errors.push("Please select a vehicle");
        $('#p4').text("* Please select a vehicle *");
        $("#vehicle").parents(".vehicle").addClass("error");
        return false;
    } else {
        $("#vehicle").parents(".vehicle").removeClass("error");
        return true;
    }
}

function carsCheck() {
    var cars = $('#cars').val();

    if (document.form1.cars.value == "-1")

    {
        //Errors.push("Please select one car make");
        $('#p5').text("* Please select one car make *");
        $("#cars").parents(".cars").addClass("error");
        return false;
    } else {
        $("#cars").parents(".cars").removeClass("error");
        return true;
    }
}
(function ($) {
    $.fn.selected = function (fn) {
        return this.each(function () {
            $(this).focus(function () {
                this.dataChanged = false;
            }).change(function () {
                this.dataChanged = true;
                fn(this);
            }).blur(function (e) {
                if (!this.dataChanged) {
                    fn(this);
                }
            });
        });
    };
})(jQuery);

最佳答案

就您而言，我可能会添加一个名为 validations 的数组，并在每次添加新文本框时在其上推送一个新的验证函数。提交时，我会检查 validations 数组中的每个函数并输出可能的错误。如果没有错误，则提交，否则显示错误。

您可以创建一个返回验证函数的函数。例如:

function createNumericValidationForField($yourNewElement) {
  return function () {
    // your logic here, for example:
    try {
      return { result: parseInt($yourNewElement.value()) };
    } catch (err) {
      return { error: err };
    }
  };
}

然后您可以遍历 validations 数组，调用每个函数并检查返回的对象中是否有结果或错误。

关于javascript - 如何从 jquery 的下拉列表中选择动态创建的文本框的验证？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48879221/

javascript - 如何从 jquery 的下拉列表中选择动态创建的文本框的验证？

上一篇：jQuery 导致 "Synchronous XMLHttpRequest on the main thread is deprecated"警告

下一篇：javascript - 如何使用jquery检查父元素的类