Jquery - 只验证多个表单中的一个表单 [英] Jquery - Validating only one form out of multiple forms
问题描述
通过API获取特定问题的 Answers ，并形成相应的HTML并将其附加到div 。我的HTML有点像这样： -
< div>
< p>一些答案< / p>
< div class =comments>< / div>
< button type =submit>评论< / button>
< / form>
< / div>
< / div>
所以，我在一些div中动态地添加HTML。正如你所看到的，可以有很多答案，因此可以有多个注释表单。
我写了一个验证器，它是这样的： - $ / $>
<$ c $ （函数（）{
$（document）.on（'submit'，'.comment_form'，function（e）{
alert（111）
form_id = $（this ）.id
e.preventDefault（）;
if（$（this）.valid（））{
$ .ajax（{
...
} ）;
}
}）
$（this）.validate（{
忽略：''，
onsubmit：false，
规则：{
评论：{
required：true，
minlength：10
}
}
}）;
}）
这不符合预期。
所以，我的问题是如何验证我提交的当前表单？
如果动态添加任何带有表单的div，则创建一个函数，当div或表单动态添加时，创建一个基于Id和call函数的应用验证功能。
函数applyValidate（id）{
$（id）.validate（{
忽略：''，
onsubmit：false，
rules ：{
评论：{
required：true，
minlength：10
}
}
}）;
$ b 如果所有表单一次都在页面中加载，并且您想要绑定validate在每个表单上，您可以使用下面的代码。
$ b $（function（） {$（document）.on（'submit'，'.comment_form'，function（e）{form_id = $（this）.id e.preventDefault（）; if（$（this）.valid（））{console。如果所有表单不是在页面中一次动态添加和渲染的，则必须在每个表单上应用验证，否则在$（function（）{}之外添加applyValidate（id）函数。 ）;当动态添加表单时调用applyValidate（id）函数* / $（'。comment_form'）。each（function（）{//附加到页面$（this）的所有表单元素.validate（{ignore：' '，onsubmit：false，规则：{comment：{ required：true，minlength：10}}}）; }）;}）;
< script src = https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js\"></script><script src =https://cdnjs.cloudflare.com/ajax /libs/jquery-validate/1.15.1/jquery.validate.js\"></script><div> < p为H.一些答案< / p> < div class =comments>< / div> < form id =form_62class =comment_formmethod =POSTaction =URL> <！ - 此ID是可变的 - > < textarea rows =3name =comment>< / textarea> <按钮类型=提交>评论< /按钮> < /形式>< / DIV>< DIV> < p为H.一些答案< / p> < div class =comments>< / div> < form id =form_63class =comment_formmethod =POSTaction =URL> <！ - 此ID是可变的 - > < textarea rows =3name =comment>< / textarea> <按钮类型=提交>评论< /按钮> < /形式>< / DIV>< DIV> < p为H.一些答案< / p> < div class =comments>< / div> < form id =form_64class =comment_formmethod =POSTaction =URL> <！ - 此ID是可变的 - > < textarea rows =3name =comment>< / textarea> <按钮类型=提交>评论< /按钮> < / form>< / div>
So, I've browsed many threads on SO, but couldnt find my related query. Well, I've a webapp similar to SO, where questions are asked, and people have the liberty to comment/answer on the question (also comments on answers are allowed).
I get the Answers of a particular question via the API and form the respective HTML and append it to a div. My HTML is somewhat like this:-
<div>
<p> Some Answer </p>
<div class="comments"></div>
<form id="form_62" class="comment_form" method="POST" action="URL"> <!--This id is variable-->
<textarea rows="3" name="comment"></textarea>
<button type="submit">Comment </button>
</form>
</div>
</div>
So, I append HTML like this in some div DYNAMICALLY. As you can see, there can be many answers, and hence multiple comments form.
I wrote a validator against it, which is as follow:-
$(function(){
$(document).on('submit', '.comment_form', function(e){
alert(111)
form_id = $(this).id
e.preventDefault();
if($(this).valid()){
$.ajax({
...
});
}
})
$(this).validate({
ignore: '',
onsubmit : false,
rules: {
comment: {
required: true,
minlength: 10
}
}
});
})
This does not works as expected.
So, my question is how can I validate my current form which is submitted?
If any div with form is dynamically added then create one function that apply validate on form based on Id and call function when div or form added dynamically.
function applyValidate(id){
$(id).validate({
ignore: '',
onsubmit : false,
rules: {
comment: {
required: true,
minlength: 10
}
}
});
}
If all forms are loaded in page at a time and You want to bind validate on each form then you can use below code.
$(function(){
$(document).on('submit', '.comment_form', function(e){
form_id = $(this).id
e.preventDefault();
if($(this).valid()){
console.log('success')
}
});
/* If all forms are not dynamically added and rendered at once in page then you have to apply validate on each form otherwise add applyValidate(id) function outside of $(function(){}); and call applyValidate(id) function when form is dynamically added*/
$('.comment_form').each(function() {
// attach to all form elements on page
$(this).validate({
ignore: '',
onsubmit : false,
rules: {
comment: {
required: true,
minlength: 10
}
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.js"></script>
<div>
<p> Some Answer </p>
<div class="comments"></div>
<form id="form_62" class="comment_form" method="POST" action="URL"> <!--This id is variable-->
<textarea rows="3" name="comment"></textarea>
<button type="submit">Comment </button>
</form>
</div>
<div>
<p> Some Answer </p>
<div class="comments"></div>
<form id="form_63" class="comment_form" method="POST" action="URL"> <!--This id is variable-->
<textarea rows="3" name="comment"></textarea>
<button type="submit">Comment </button>
</form>
</div>
<div>
<p> Some Answer </p>
<div class="comments"></div>
<form id="form_64" class="comment_form" method="POST" action="URL"> <!--This id is variable-->
<textarea rows="3" name="comment"></textarea>
<button type="submit">Comment </button>
</form>
</div>
这篇关于Jquery - 只验证多个表单中的一个表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
