jQuery的表单验证 - “提交()”的问题

我想学习如何验证的一种形式,我有这样的问题:

当我运行这段代码,我不输入任何内容 - 形式应该不发送,但它确实。 我的问题是......为什么,我该如何解决?

在html:

<form method="post" action="#"> <fieldset> <legend>Formular</legend> <label for="name">Name: </label> <input type="text" class="required" name="name" value="" /> <br /><br /> <label for="pass">Password: </label> <input type="password" class="required" name="pass" value="" /> <br /><br /> <input type="submit" value="Submit!" /> </fieldset> </form>

jQuery的:

$('#obal form').submit(function() { $('.required').each(function() { if($(this).val() == "") { if (errorCount === undefined) { var errorCount = 1; } else { ++errorCount; } } }); if (errorCount > 0) { window.alert( 'You didnt pass' ); return false; } else { return true; } });

如果你知道任何其他改进代码可以采取,你能告诉我藏汉,感谢.. :-)

--------------解决方案-------------

您当前的代码是不工作,因为的ErrorCount是本地传递到每一个方法的匿名函数。 这不会是可见外。

这意味着,当你这样做errorCount > 0的每个方法后,它的计算结果为false,并提交表单。

我会写你的函数像这样,

$('#obal form').submit(
function(ev)
{
var errorCount = 0; //define your errorCount variable to zero before you
//iterate using each, errorCount will be available inside your each iteration function.
$('.required').each(
function()
{
//Due to JavaScript clousures, you can access errorCount in this function.
if($(this).val() === '')
errorCount++;
}
);

//If we don't find any errors, we return. This will let the browser continue submitting the form.
if(errorCount == 0)
return;

//If control comes here, it means there were errors. Prevent form submission and display error message.
ev.preventDefault();
alert('Validation failure.');
}
);

编辑:

为什么你的代码不能正常工作?

让我们给名匿名函数(说myEachLoop)传递到'。每个'方法。

$('#obal form').submit(function() {
$('.required').each(

function myEachLoop ()
{
if($(this).val() == "") {
if (errorCount === undefined) {
var errorCount = 1; //you have defined the errorCount which is 'local' to the 'myEachLoop' function. Once myEachLoop function is over. errorCount variable is gone!

} else {
++errorCount;
}
}
});

//errorCount is 'undefined' here because the previously defined errorCount variable is gone.
if (errorCount > 0) {
window.alert( 'You didnt pass' );
return false;
} else {
return true;
}
});

你现在看到在代码中的错误?

您还需要了解JavaScript的闭包知道为什么我的代码工作。

更改此:

$('#obal form').submit(function() {

为此:

$('#obal form').submit(function(event) {
event.preventDefault();

如果你的表格是有效的,这样做(你.submit函数中):

$(this).submit();

和你的表格将被提交。

你可能想试试这个jQuery插件。 这是非常灵活的,易于使用。

我想声明的错误计数循环之前,确保范围是正确的:

var errorCount = 0;
$('.required').each(function() {
if($(this).val() == "") {
errorCount++;
}
});

分类:jQuery的 时间:2015-03-15 人气:0
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.620 (s). 10 q(s)