如何在动态创建的字段上设置验证
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在动态创建的字段上设置验证相关的知识，希望对你有一定的参考价值。
这是我的表格
<?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>
我想要在提交按钮上验证动态创建的字段
答案
编辑
首先你没有使用你在OP中声明的指定的jquery.validate插件，我无法在整个代码中看到$("#Form-name").validate()调用，而是你在javascript部分手动验证所有字段，你说你在里面使用<body>标签将onclick绑定到按钮id fill $('#fill').click(function(){，所以你需要先将jquery.validte插件包含在你的页面中然后你需要做以下更改
- 第一次改变
将class="requred"属性添加到您尝试在HTML中验证的所有字段中。
- 第二次改变
然后删除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以上是关于如何在动态创建的字段上设置验证的主要内容，如果未能解决你的问题，请参考以下文章