0

我有一个功能，可以在提交表单时检查某种类型的所有元素，如果其中一个元素未验证，则阻止提交。我使用 jQuery 来查找页面中的所有表单，并将此函数附加到它们的“onsubmit”事件中。

这样做的问题是，当函数检查某种类型的所有元素时，如果另一个表单中有无效元素，它将阻止表单被提交，即使它没有被提交，所以它们无关紧要。

为了解决这个问题，我改变了我的函数来检查某种类型的所有元素以接受表单的参数，然后只验证该表单中的元素。到现在为止还挺好。

但是，当使用jQuery将函数附加到页面上的所有表单时，如何指定表单的参数？

这是目前的jQuery代码：

jQuery("form").submit(function() {
    return CheckElements();
});

我需要以 ID 或对象的形式传递当前表单。就像是：

jQuery("form").submit(function() {
    return CheckElements(SOME WAY OF PASSING THE FORM);
});

这是否可能，如果可以，如何执行？

4

3 回答 3

2

您可以简单地将其作为参数传递：return CheckElements(this);

然后，您的CheckElements函数可以如下所示：

function CheckElements(form) {
    $(':input', form).each(function() { /*do something*/ });
}

如果您更喜欢this指向函数中的表单，您可以使用它return CheckElements.call(this);来调用您的函数；那么你不需要参数并且在函数内部你可以做例如$(':input', this)

于 2012-04-20T14:38:22.110 回答
2 
$("form").submit(function() {
    return CheckElements(this);
});
于 2012-04-20T14:42:04.887 回答
1

在这种情况下，您必须首先为表单分配一个类或 id。例如。

<div class='error' style="display:none; color:red;">the entry by you was invalid</div>
<form action="XXXX" method="XXXX" class='myForm'>
<!-- lets say you have following fields -->
name : <input type = 'text' name = 'name' class = 'field1'>
age : <input type = 'text' name = 'age' class = 'field2'>
<input type = 'submit' id='submit_btn'>
</form>

现在，您可以执行以下操作来调用 JQuery 函数，而不是调用函数 onSubmit

$(function(){
$("#submit_btn").click(function(){
var msg = checkElement();// your function must return false on error
if(msg == FALSE)
{
$('.error').show(); //create a div with style dispay:none which contains error message to show on error
}
else
{
var field1 = $('.field1').attr('value');//fetching the field1 content
var field2 = $('.field2').attr('value');//fetching the field2 content

//submit via ajax
$.ajax({
url: 'relative path to the file eg. file.php',
dta: 'f1='+field1+'&f2='+field2,//placeyour own data here
type: 'get or post',
success:function()
{
alert('done');//perform your action
}
});
return false;
}
});
});

希望这对你有帮助

于 2012-04-20T14:59:09.817 回答