如何在动态创建的字段上设置验证

Question

这是我的表格

<?php echo form_open_multipart('paidcontroller/submit'); ?>
<div class="join-left">
    <label>Person Name</label>
    <input type="text" id="pname" name="pname" placeholder="anis pathan">
    <span id="pnameerror" style="display: none;">Please enter Person Name</span>
    <label> Mobile</label>
    <input type="text" id="mobile" name="mobile" placeholder="9111111111">
    <span id="mobileerror" style="display: none;">Please enter Mobile No</span>
    <span id="validmerror" style="display: none;">Please enter valid mobile no</span>
    <label> Email Address</label>
    <input type="text" id="email" name="email" placeholder="@anispathan">
    <span id="emailerror" style="display: none;">Please enter email address</span>
    <span id="valideerror" style="display: none;">Please enter valid Email</span>
    <label>Password</label>
    <input type="password" id="passw" name="passw" placeholder="*********">
    <span id="passwerror" style="display: none;">Please enter Password</span>
    <label>Confirm Password</label>
    <input type="password" id="cpass" name="cpass" placeholder="*********">
    <span id="cpasserror" style="display: none;">Please enter Confirm password</span>
    <span id="cmpasserror" style="display: none;">Password do not match with the Confirm Password</span>
    <label>Product Category</label>
    <?php
    $attributes = 'id="cat"';
    echo form_dropdown('cat', $cat, set_value('cat'), $attributes);
    ?>
    <span id="categoryerror" style="display: none;">Please select category</span>

    <label>Company Turnover</label>
    <select id="turnover" name="turnover">
        <option value="1~50 Lacs" selected="">1~50 Lacs</option>
        <option value="50 Lacs~1 Crore">50 Lacs~1 Crore</option>
        <option value="1 Crore~5 Crores">1 Crore~5 Crores</option>
        <option value="5 Crores ~ 10 Crores">5 Crores ~ 10 Crores</option>
        <option value="10 Crores ~ 20 Crores">10 Crores ~ 20 Crores</option>
        <option value="20 Crores ~ 30 Crores">20 Crores ~ 30 Crores</option>
        <option value="30 Crores ~ 40 Crores">30 Crores ~ 40 Crores</option>
        <option value="40 Crores ~ 50 Crores">40 Crores ~ 50 Crores</option>
        <option value="50 Crores and Above">50 Crores and Above</option>
    </select>
    <span id="turnovererror" style="display: none;">Please select Company Turnover</span>

    <label>Company Logo</label>
    <input type="file" id="image" name="image">
    <span id="imageerror" style="display: none;">Please select Company Logo</span>

    <label>Upload Template</label>
    <input type="file" id="template" name="template">
    <span id="temperror" style="display: none;">Please upload Template</span>



</div>
<div class="join-right">
    <label>Company Name</label>
    <input type="text" id="company_name" name="company_name" pliceholder="ABC Corporation">
    <span id="company_nameerror" style="display: none;">Please enter Company Name</span>
    <label>Country</label>
    <?php
    $attributes = 'id="country"';
    echo form_dropdown('country', $country, set_value('country'), $attributes);
    ?>
    <span id="countryerror" style="display: none;">Please select Country</span>


    <label>state</label>
    <?php
    $attributes = 'id="state"';
    echo form_dropdown('state', $state, set_value('state'), $attributes);
    ?>
    <span id="stateerror" style="display: none;">Please select state</span>


    <label>city</label>
    <?php
    $attributes = 'id="city"';
    echo form_dropdown('city', $city, set_value('city'), $attributes);
    ?>
    <span id="cityerror" style="display: none;">Please select city</span>


    <label>Pin/zip Code</label>
    <input type="text" id="pin" name="pin" pliceholder="Pin/zip Code">
    <span id="pinerror" style="display: none;">Please enter Pin code</span>
    <label>Address</label>
    <textarea id="address" name="address" cols="80" rows="4" wrap="virtual"></textarea>
    <span id="addresserror" style="display: none;">Please enter address</span>

    <label>Year of Establishment</label>
    <select id="year" name="year">
        <option value="2017">2017</option><option value="2016">2016</option><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option><option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option><option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option><option value="1952">1952</option><option value="1951">1951</option><option value="1950">1950</option><option value="1949">1949</option><option value="1948">1948</option><option value="1947">1947</option><option value="1946">1946</option><option value="1945">1945</option><option value="1944">1944</option><option value="1943">1943</option><option value="1942">1942</option><option value="1941">1941</option><option value="1940">1940</option><option value="1939">1939</option><option value="1938">1938</option><option value="1937">1937</option><option value="1936">1936</option><option value="1935">1935</option><option value="1934">1934</option><option value="1933">1933</option><option value="1932">1932</option><option value="1931">1931</option><option value="1930">1930</option><option value="1929">1929</option><option value="1928">1928</option><option value="1927">1927</option><option value="1926">1926</option><option value="1925">1925</option><option value="1924">1924</option><option value="1923">1923</option><option value="1922">1922</option><option value="1921">1921</option><option value="1920">1920</option><option value="1919">1919</option><option value="1918">1918</option><option value="1917">1917</option><option value="1916">1916</option><option value="1915">1915</option><option value="1914">1914</option><option value="1913">1913</option><option value="1912">1912</option><option value="1911">1911</option><option value="1910">1910</option><option value="1909">1909</option><option value="1908">1908</option><option value="1907">1907</option><option value="1906">1906</option><option value="1905">1905</option><option value="1904">1904</option><option value="1903">1903</option><option value="1902">1902</option><option value="1901">1901</option><option value="1900">1900</option><option value="1899">1899</option><option value="1898">1898</option><option value="1897">1897</option><option value="1896">1896</option><option value="1895">1895</option><option value="1894">1894</option><option value="1893">1893</option><option value="1892">1892</option><option value="1891">1891</option><option value="1890">1890</option><option value="1889">1889</option><option value="1888">1888</option><option value="1887">1887</option><option value="1886">1886</option><option value="1885">1885</option><option value="1884">1884</option><option value="1883">1883</option><option value="1882">1882</option><option value="1881">1881</option><option value="1880">1880</option><option value="1879">1879</option><option value="1878">1878</option><option value="1877">1877</option><option value="1876">1876</option><option value="1875">1875</option><option value="1874">1874</option><option value="1873">1873</option><option value="1872">1872</option><option value="1871">1871</option><option value="1870">1870</option><option value="1869">1869</option><option value="1868">1868</option><option value="1867">1867</option><option value="1866">1866</option><option value="1865">1865</option><option value="1864">1864</option><option value="1863">1863</option><option value="1862">1862</option><option value="1861">1861</option><option value="1860">1860</option><option value="1859">1859</option><option value="1858">1858</option><option value="1857">1857</option><option value="1856">1856</option><option value="1855">1855</option><option value="1854">1854</option><option value="1853">1853</option><option value="1852">1852</option><option value="1851">1851</option><option value="1850">1850</option><option value="1849">1849</option><option value="1848">1848</option><option value="1847">1847</option><option value="1846">1846</option><option value="1845">1845</option><option value="1844">1844</option><option value="1843">1843</option><option value="1842">1842</option><option value="1841">1841</option><option value="1840">1840</option><option value="1839">1839</option><option value="1838">1838</option><option value="1837">1837</option><option value="1836">1836</option><option value="1835">1835</option><option value="1834">1834</option><option value="1833">1833</option><option value="1832">1832</option><option value="1831">1831</option><option value="1830">1830</option><option value="1829">1829</option><option value="1828">1828</option><option value="1827">1827</option><option value="1826">1826</option><option value="1825">1825</option><option value="1824">1824</option><option value="1823">1823</option><option value="1822">1822</option><option value="1821">1821</option><option value="1820">1820</option><option value="1819">1819</option><option value="1818">1818</option><option value="1817">1817</option><option value="1816" selected="">1816</option>                                </select>

    <div id="TextBoxDiv1">
        <label>Textbox #1 : </label><input class="required" type='textbox' id='textbox1' >
    </div>
    <button type="submit" form="form1" id="add" name="add" value="Submit">Add</button>
    <button type="submit" form="form1" id="remove" name="remove">Remove</button>
</div>
<div class="main-batton">

    <button type="submit" form="form1" id="fill" name="fill" value="Submit">Submit</button>

</div>
<?php form_close(); ?>

这是我的jquery代码，用于在HTML文件的标题部分创建动态字段。

<head>
    <!--link -->
    <script type="text/javascript">
        $(document).ready(function () {

            var counter = 2;

            $("#add").click(function () {

                if (counter > 10) {
                    alert("Only 10 textboxes allow");
                    return false;
                }

                var newTextBoxDiv = $(document.createElement('div'))
                    .attr("id", 'TextBoxDiv' + counter);

                newTextBoxDiv.after('#TextBoxDiv').html('<label>Textbox #' + counter + ' : </label>' +
                    '<input type="text" class="required" name="textbox' + counter +
                    '" id="textbox' + counter + '" value="" >');

                newTextBoxDiv.appendTo(".join-right");


                counter++;
            });
            $("#remove").click(function () {
                if (counter == 1) {
                    alert("No more textbox to remove");
                    return false;
                }

                counter--;
                $("#TextBoxDiv" + counter).remove();

            });
        });
    </script>
</head>

在body部分中，这是提交按钮的验证代码，其中我已经完成了静态表单字段的验证。

<script type="text/javascript">
    $('#fill').click(function () {

        $('#pnameerror').hide();
        $('#company_nameerror').hide();
        $('#mobileerror').hide();
        $('#countryerror').hide();
        $('#emailerror').hide();
        $('#stateerror').hide();
        $('#passwerror').hide();
        $('#cityerror').hide();
        $('#cpasserror').hide();
        $('#cmpasserror').hide();
        $('#pinerror').hide();
        $('#categoryerror').hide();
        $('#imageerror').hide();
        $('#addresserror').hide();
        $('#valideerror').hide();
        $('#validmerror').hide();
        $('#temperror').hide();

        var pname = $('#pname').val();
        var company_name = $('#company_name').val();
        var mobile = $('#mobile').val();
        var country = $('#country').val();
        var email = $('#email').val();
        var state = $('#state').val();
        var passw = $('#passw').val();
        var city = $('#city').val();
        var cpass = $('#cpass').val();
        var pin = $('#pin').val();
        var cat = $('#cat').val();
        var address = $('#address').val();
        var turnover = $('#turnover').val();
        var year = $('#year').val();
        var image = $('#image').val();
        var template = $('#template').val();
        var expr = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        var mob = /^([0|\+[0-9]{1,5})?([7-9][0-9]{9})$/;



        if (pname.length == 0) {
            $('#pnameerror').show();
        }
        if (company_name.length == 0) {
            $('#company_nameerror').show();
        }
        if (mobile.length == 0) {
            $('#mobileerror').show();
        }
        if (mobile.length != 0 && !mob.test(mobile)) {
            $('#validmerror').show();
        }
        if (country == 0) {
            $('#countryerror').show();
        }
        if (email.length == 0) {
            $('#emailerror').show();
        }
        if (email.length != 0 && !expr.test(email)) {
            $('#valideerror').show();
        }
        if (state == 0) {
            $('#stateerror').show();
        }
        if (passw.length == 0) {
            $('#passwerror').show();
        }
        if (city == 0) {
            $('#cityerror').show();
        }
        if (cpass.length == 0) {
            $('#cpasserror').show();
        }
        if (passw.length != 0 && cpass.length != 0 && cpass != passw) {
            $('#cmpasserror').show();
        }
        if (pin.length == 0) {
            $('#pinerror').show();
        }
        if (cat == 0) {
            $('#categoryerror').show();
        }

        if (address == "") {
            $('#addresserror').show();
        }
        if (image.length == 0) {
            $('#imageerror').show();
        }
        if (template.length == 0) {
            $('#temperror').show();
        } else if (pname.length != 0 && company_name.length != 0 && mobile.length != 0 && mob.test(mobile) &&
            country != 0 &&
            email.length != 0 && expr.test(email) && state != 0 && passw.length != 0 && city != 0 && cpass.length !=
            0 &&
            cpass.length != 0 && passw.length != 0 && cpass == passw && pin.length != 0 && cat != 0 && address !=
            "" && image.length != 0) {
            var $target = $(event.target);
            $target.closest("form").submit();
        }
    });
</script>

我想要在提交按钮上验证动态创建的字段

Answer 1

编辑

首先你没有使用你在OP中声明的指定的jquery.validate插件，我无法在整个代码中看到$("#Form-name").validate()调用，而是你在javascript部分手动验证所有字段，你说你在里面使用<body>标签将onclick绑定到按钮id fill $('#fill').click(function(){，所以你需要先将jquery.validte插件包含在你的页面中然后你需要做以下更改

1. 第一次改变

将class="requred"属性添加到您尝试在HTML中验证的所有字段中。

2. 第二次改变

然后删除onclick函数中#fill即$('#fill').click(function () {的所有内容并将其更新为以下内容。

$('#fill').click(function () {
    $("#ADD-YOUR-FORM-NAME").submit();
});
$("#ADD-YOUR-FORM-NAME").validate();

然后你需要将你的field creation script更新为以下内容

$("#add").click(function () {
    if (counter > 10) {
        alert("Only 10 textboxes allow");
        return false;
    }

    var newTextBoxDiv = $(document.createElement('div'))
        .attr("id", 'TextBoxDiv' + counter);

    newTextBoxDiv.after('#TextBoxDiv').html('<label>Textbox #' + counter + ' : </label>' +
        '<input type="text" class="required" name="textbox' + counter +
        '" id="textbox' + counter + '" value="" >');

    newTextBoxDiv.appendTo(".join-right");

    $('#textbox' + counter).rules("add", {
        required: true
    })

    counter++;
});

见演示

$(document).ready(function() {

  var counter = 2;

  $("#add").click(function() {
    if (counter > 10) {
      alert("Only 10 textboxes allow");
      return false;
    }

    var newTextBoxDiv = $(document.createElement('div'))
      .attr("id", 'TextBoxDiv' + counter);

    newTextBoxDiv.after('#TextBoxDiv').html('<label>Textbox #' + counter + ' : </label>' +
      '<input type="text" class="required" name="textbox' + counter +
      '" id="textbox' + counter + '" value="" >');

    newTextBoxDiv.appendTo(".join-right");

    $('#textbox' + counter).rules("add", {
      required: true
    })

    counter++;
  });
  $("#remove").click(function() {
    if (counter == 1) {
      alert("No more textbox to remove");
      return false;
    }

    counter--;
    $("#TextBoxDiv" + counter).remove();

  });


  $('#fill').on('click', function() {
    $("#my-form").submit();
  });
  $("#my-form").validate();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<form id="my-form">

  <div class="join-right">


    <label>Pin/zip Code</label>
    <input type="text" id="pin" name="pin" pliceholder="Pin/zip Code" class="required">
    <span id="pinerror" style="display: none;">Please enter Pin code</span>
    <label>Address</label>
    <textarea id="address" name="address" cols="80" rows="4" wrap="virtual" class="required"></textarea>
    <span id="addresserror" style="display: none;">Please enter address</span>

    <label>Year of Establishment</label>
    <select id="year" name="year" class="required">
      <option value="2017">2017</option>
      <option value="2016">2016</option>
      <option value="2015">2015</option>
      <option value="2014">2014</option>
      <option value="2013">2013</option>
      <option value="2012">2012</option>
      <option value="2011">2011</option>
      <option value="2010">2010</option>
      <option value="2009">2009</option>
      <option value="2008">2008</option>
      <option value="2007">2007</option>
      <option value="2006">2006</option>
      <option value="2005">2005</option>
      <option value="2004">2004</option>
      <option value="2003">2003</option>
      <option value="2002">2002</option>
      <option value="2001">2001</option>
      <option value="2000">2000</option>
      <option value="1999">1999</option>
      <option value="1998">1998</option>
      <option value="1997">1997</option>
      <option value="1996">1996</option>
      <option value="1995">1995</option>
      <option value="1994">1994</option>
      <option value="1993">1993</option>
      <option value="1992">1992</option>
      <option value="1991">1991</option>
      <option value="1990">1990</option>
      <option value="1989">1989</option>
      <option value="1988">1988</option>
      <option value="1987">1987</option>
      <option value="1986">1986</option>
      <option value="1985">1985</option>
      <option value="1984">1984</option>
      <option value="1983">1983</option>
      <option value="1982">1982</option>
      <option value="1981">1981</option>
      <option value="1980">1980</option>
      <option value="1979">1979</option>
      <option value="1978">1978</option>
      <option value="1977">1977</option>
      <option value="1976">1976</option>
      <option value="1975">1975</option>
      <option value="1974">1974</option>
      <option value="1973">1973</option>
      <option value="1972">1972</option>
      <option value="1971">1971</option>
      <option value="1970">1970</option>
      <option value="1969">1969</option>
      <option value="1968">1968</option>
      <option value="1967">1967</option>
      <option value="1966">1966</option>
      <option value="1965">1965</option>
      <option value="1964">1964</option>
      <option value="1963">1963</option>
      <option value="1962">1962</option>
      <option value="1961">1961</option>
      <option value="1960">1960</option>
      <option value="1959">1959</option>
      <option value="1958">1958</option>
      <option value="1957">1957</option>
      <option value="1956">1956</option>
      <option value="1955">1955</option>
      <option value="1954">1954</option>
      <option value="1953">1953</option>
      <option value="1952">1952</option>
      <option value="1951">1951</option>
      <option value="1950">1950</option>
      <option value="1949">1949</option>
      <option value="1948">1948</option>
      <option value="1947">1947</option>
      <option value="1946">1946</option>
      <option value="1945">1945</option>
      <option value="1944">1944</option>
      <option value="1943">1943</option>
      <option value="1942">1942</option>
      <option value="1941">1941</option>
      <option value="1940">1940</option>
      <option value="1939">1939</option>
      <option value="1938">1938</option>
      <option value="1937">1937</option>
      <option value="1936">1936</option>
      <option value="1935">1935</option>
      <option value="1934">1934</option>
      <option value="1933">1933</option>
      <option value="1932">1932</option>
      <option value="1931">1931</option>
      <option value="1930">1930</option>
      <option value="1929">1929</option>
      <option value="1928">1928</option>
      <option value="1927">1927</option>
      <option value="1926">1926</option>
      <option value="1925">1925</option>
      <option value="1924">1924</option>
      <option value="1923">1923</option>
      <option value="1922">1922</option>
      <option value="1921">1921</option>
      <option value="1920">1920</option>
      <option value="1919">1919</option>
      <option value="1918">1918</option>
      <option value="1917">1917</option>
      <option value="1916">1916</option>
      <option value="1915">1915</option>
      <option value="1914">1914</option>
      <option value="1913">1913</option>
      <option value="1912">1912</option>
      <option value="1911">1911</option>
      <option value="1910">1910</option>
      <option value="1909">1909</option>
      <option value="1908">1908</option>
      <option value="1907">1907</option>
      <option value="1906">1906</option>
      <option value="1905">1905</option>
      <option value="1904">1904</option>
      <option value="1903">1903</option>
      <option value="1902">1902</option>
      <option value="1901">1901</option>
      <option value="1900">1900</option>
      <option value="1899">1899</option>
      <option value="1898">1898</option>
      <option value="1897">1897</option>
      <option value="1896">1896</option>
      <option value="1895">1895</option>
      <option value="1894">1894</option>
      <option value="1893">1893</option>
      <option value="1892">1892</option>
      <option value="1891">1891</option>
      <option value="1890">1890</option>
      <option value="1889">1889</option>
      <option value="1888">1888</option>
      <option value="1887">1887</option>
      <option value="1886">1886</option>
      <option value="1885">1885</option>
      <option value="1884">1884</option>
      <option value="1883">1883</option>
      <option value="1882">1882</option>
      <option value="1881">1881</option>
      <option value="1880">1880</option>
      <option value="1879">1879</option>
      <option value="1878">1878</option>
      <option value="1877">1877</option>
      <option value="1876">1876</option>
      <option value="1875">1875</option>
      <option value="1874">1874</option>
      <option value="1873">1873</option>
      <option value="1872">1872</option>
      <option value="1871">1871</option>
      <option value="1870">1870</option>
      <option value="1869">1869</option>
      <option value="1868">1868</option>
      <option value="1867">1867</option>
      <option value="1866">1866</option>
      <option value="1865">1865</option>
      <option value="1864">1864</option>
      <option value="1863">1863</option>
      <option value="1862">1862</option>
      <option value="1861">1861</option>
      <option value="1860">1860</option>
      <option value="1859">1859</option>
      <option value="1858">1858</option>
      <option value="1857">1857</option>
      <option value="1856">1856</option>
      <option value="1855">1855</option>
      <option value="1854">1854</option>
      <option value="1853">1853</option>
      <option value="1852">1852</option>
      <option value="1851">1851</option>
      <option value="1850">1850</option>
      <option value="1849">1849</option>
      <option value="1848">1848</option>
      <option value="1847">1847</option>
      <option value="1846">1846</option>
      <option value="1845">1845</option>
      <option value="1844">1844</option>
      <option value="1843">1843</option>
      <option value="1842">1842</option>
      <option value="1841">1841</option>
      <option value="1840">1840</option>
      <option value="1839">1839</option>
      <option value="1838">1838</option>
      <option value="1837">1837</option>
      <option value="1836">1836</option>
      <option value="1835">1835</option>
      <option value="1834">1834</option>
      <option value="1833">1833</option>
      <option value="1832">1832</option>
      <option value="1831">1831</option>
      <option value="1830">1830</option>
      <option value="1829">1829</option>
      <option value="1828">1828</option>
      <option value="1827">1827</option>
      <option value="1826">1826</option>
      <option value="1825">1825</option>
      <option value="1824">1824</option>
      <option value="1823">1823</option>
      <option value="1822">1822</option>
      <option value="1821">1821</option>
      <option value="1820">1820</option>
      <option value="1819">1819</option>
      <option value="1818">1818</option>
      <option value="1817">1817</option>
      <option value="1816" selected="">1816</option>
    </select>

    <div id="TextBoxDiv1">
      <label>Textbox #1 : </label>
      <input class="required" type='textbox' id='textbox1'>
    </div>
    <button type="submit" form="form1" id="add" name="add" value="Submit">Add</button>
    <button type="submit" form="form1" id="remove" name="remove">Remove</button>
  </div>
  <div class="main-batton">

    <button type="submit" form="form1" id="fill" name="fill" value="Submit">Submit</button>

  </div>
</form>