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

【问题标题】：How to select validation for dynamically created textbox from dropdown in jquery?如何从 jquery 的下拉列表中为动态创建的文本框选择验证？
【发布时间】：2018-07-30 11:00:35
【问题描述】：

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

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

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

提前致谢。

<!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);

【问题讨论】：

我无法运行此代码，因为nameCheck(); 没有在任何地方定义，而且代码中的 html 问题也很少
@brk 抱歉，我现在已经编辑并添加了函数。

标签： javascript jquery validation

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

嗯，你可以通过多种方式做到这一点。

1.为您要实现的每个 input 字段编写验证

最有效的方法是使用RegEx 编写检查，如下所示：

数字

const numbers = new RegExp(/^[0-9]+$/);
numbers.test(yourString)

字符

const characters = new RegExp(/^[a-zA-Z]*$/);
characters.test(yourString);

根据指定的RegExp 检查您的变量时，test() 函数返回true 或false。

您可以在input 调用的每个onChange() 事件上执行此操作，以便为用户提供良好且快速的响应，或者您可以在提交form 之前使用它。

您可以在构造 input 字段时将其添加到 onChange() 事件中，如下所示：

var newObject = document.createElement('input');
newObject.onchange = numberValidation();

2。构造时更改input类型

当您动态创建 label 和 input 字段时，您可以轻松更改 inputs 类型：

var newObject = document.createElement('input');
newObject.type = 'password';     // can be password, number, tel, etc.

这些input 类型可以防止输入错误的值。

【讨论】：