我正在尝试使用Jquery的Validate插件来验证一个字段.我可以使用简单的测试表单,但是当我尝试将其插入我网站上的大型现有表单时,调用validate返回undefined.它应该返回一个Validator对象.我怎么去搞清楚什么是错的？
以下是正在运行的示例代码:
<script type="text/javascript">
function tst(ctrl) {
var frm = $(ctrl).parents('form');
alert('Is email valid? ' + frm.validate({ showErrors: function () { } }).element(ctrl));
}
</script>
<form id="form1" action="" method="post">
<input type="text" name="email" onblur="tst(this)" class="email"/>
</form>
但是,如果我在更大的现有表单上尝试此操作,则validate调用将返回undefined,从而导致调用JavaScript错误element.我认为必须有一些更大的形式使validate"崩溃",但它可能是什么？
我热衷于使用jQuery验证器插件来验证我的代码,但我想禁用自动提交我的表单.我宁愿使用jQuery $.post方法自己发送它.
事实上,我不确定为什么我的表单提交时考虑到我的按钮不是类型submit但只是<button></button>.
<form id="my_form" name="my_form" method="post" action="">
...
<button id="previous_button" class="nav-button">Previous</button>
<button id="next_button" class="nav-button">Next</button>
</form>
和我的onClick监听器,我希望在有效输入时我可以发布表单数据然后移动到新页面,否则重新定位窗口,以便用户看到`error_messages'框,其中显示我的所有错误消息.
$('#next_button').click(function(event) {
validateAndSave();
});
function validateAndSave() {
if($('#my_form').valid()) {
$.post('save_form_to_database.php',
$('#my_form').serialize());
window.location = 'next_page.php';
} else {
// reposition to see the error messages
window.location = '#error_messages';
}
}
虽然这个结果(并且结果是相同的,无论debug是设置为true还是false)是在有效输入上,我可以通过查看状态栏看到`next_page.php'短暂闪烁然后我被收回再次到我的原始页面.同样在验证失败时,我的页面似乎没有正确地重新定位.
所以我的问题是:
为什么我的页面被重定向回原始页面？
如何使用验证器进行验证,然后使用$ .post以自己的方式发布表单？
提前谢谢了.
感谢回复更新
根据按钮元素上的这个页面:
BUTTON的TYPE属性指定按钮的类型,并采用值提交(默认值),重置或按钮
所以我的按钮采用默认值 type="submit"
所以这段代码看起来很好,我似乎无法看到错误的来源.它在$(document).ready(function(){中正确包装.
$("#signup-form").validate({
rules: {
firstname: 'required',
signup-email: 'required',
signup-password: 'required',
signup-password-v: 'required'
},
messages: {
firstname: 'Your firstname is required!',
signup-email: 'Your email is required!',
signup-password: 'A password is required!',
signup-password-v: 'Please verify your password!'
}
});
我在html head标签中的jquery库之后调用jquery.validate所以任何想法？
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel='stylesheet' type='text/css' href='./css/index.css' />
<script type="text/javascript" src="./js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="./js/jquery.validate.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
</head>
<body>
<div id="navbar">
<div id="title">CrockShark.com</div>
</div>
<div id="container"> …我想以下列方式使用jauery验证文本字段:
1.文本字段仅占用0-9,只有一个小数位;和
2.如果金额不是负数,请在输入数字的乞讨处输入负数符号!
$('[name="pm"]').keyup(function() {
//?
});
这是我重置用户密码的代码,用户忘记了密码.数据通过AJAX请求发送到PHP代码,PHP代码根据输入的有效性简单地回显"Y"或"N".
问题是,AJAX调用在Firefox 19和IE 9中不起作用.我还没有尝试过其他版本的IE.AJAX调用在chrome和safari中完美运行.有没有人遇到过同样的问题？有人可以帮忙吗？
<title> Forgot Password? </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery- validation/jquery.validate.js"></script>
<style type="text/css">
label.error { color: red; }
#status { color: green; }
</style>
<script>
$(document).ready(function(){
$('#code_form').hide();
$('#password_form').hide();
$("#email_form").validate({
onkeyup: false,
rules: {
email: {
required: true,
email: true
}
},
messages: {
email: {
required: "Please enter your email ID.",
email: "Please enter a valid email ID."
}
}
});
$('#email_send').click(function() {
event.preventDefault();
var email = $('#email').val();
$.ajax({
type: "POST",
url: "reset_code.php",
data: {email: email},
cache: …我已经搜索了很多,但仍然没有想出来......如何将各种错误消息传递给单个框(div),而不是在相关字段附近突出显示它们.让我们说,我有4个必填字段,并为他们提供自定义消息:
<script>
// validation
(function($,W,D)
{
var JQUERY4U = {};
JQUERY4U.UTIL =
{
setupFormValidation: function()
{
//form validation rules
$("#register-form").validate({
validClass: "valid",
errorContainer: $("#error-note"),
errorLabelContainer: $([]),
rules: {
name: "required",
email: {
required: true,
email: true
},
birthdate: "required",
eua: "required"
},
messages: {
name: "Name is required",
email: "Please, enter your email",
birthdate: "We need to know your date of birth",
eua: "Please check the checkbox..."
},
submitHandler: function(form) {
form.submit();
}
});
}
}
//when the dom has …我正在使用JQuery验证插件验证表单.
页面第一次加载时,表单将完美验证,并且只有在完成所有字段后才会提交.然后表单回发给自己,当尝试再次输入详细信息时,验证不起作用但仍然允许提交并且数据成功发送到数据库.
这是我的代码:
<form id="formSubmit" method="post" action="post to this page">
<fieldset data-role="fieldcontain">
<p>
<label for="clubSelect">Preferred Club</label>
<select id="clubSelect" name="clubSelect" class="required">
<option value="000">Select a Club</option>
<?php if ($db->num_rows > 0)
{
foreach($results as $result)
{
?>
<option value="<?php echo $result->id;?>"><?php echo $result->name;?></option>
<?php
}
}
?>
</select>
</fieldset>
<fieldset data-role="fieldcontain">
<label for="txtName">Name</label>
<input type="text" id="txtName" name="txtName" class="required"/>
</fieldset>
<fieldset data-role="fieldcontain">
<label for="txtEmail">Email</label>
<input type="text" id="txtEmail" name="txtEmail" class="required email" minlength="5"/>
</fieldset>
<fieldset data-role="fieldcontain">
<label for="txtCell">Contact Number</label>
<input type="tel" id="txtCell" name="txtCell" class="required"/>
</fieldset> …我有这个HTML代码:
<section id="variations_holder">
<input type="text" name="field1" class="pprice" />
<br/>
<input type="text" name="field2" class="pprice" />
<br/>
<input type="submit" />
</section>
这是我用来处理验证的代码:
$('#variations_holder input.pprice').each(function() {
$(this).rules('add', {
required: true,
number: true,
messages: {
required: "Debes introducir un precio de la variación",
number: "El precio de la variación debe ser un valor numérico o decimal"
}
});
});
它可以工作,但是当HTML看起来像这样(通知输入具有相同的名称):
<section id="variations_holder">
<input type="text" name="field1" class="pprice" />
<br/>
<input type="text" name="field1" class="pprice" />
<br/>
<input type="submit" />
</section>
相同的代码停止工作并导致此错误:
TypeError:e.validator.methods [o]未定义
我该如何解决这个问题？
这源于这个问题
我正在使用jQuery validate插件进行表单验证.它只是检查第一个字段.如果第一个字段验证为真,那么它就是提交表单.它没有验证休息字段..
我正在使用bootstrap 3.0
<script type="text/javascript">
$(document).ready(function(){
$('#contact').validate({
rules: {
firstname: {
required: true,
minlength: 5,
},
useremail: {
required: true,
}
}
});
})
</script>
<form action="" method="" id="contact">
<div class="form-group">
<label> Your Name </label>
<input type="text" class="form-control" placeholder="Enter Your Name" id="firstname" required="" minlength="5"/>
</div>
<div class="form-group">
<label> Your E-mail </label>
<input type="email" class="form-control" placeholder="Enter Your Email" id="useremail" required=""/>
</div>
<div class="form-group">
<label> Contact Detail </label>
<input type="text" class="form-control" placeholder="Enter Contact Number" id="mobile" minlength="10" maxlength="10" required=""/>
</div>
<div class="form-group"> …我使用新的reCaptcha和jQuery Validate插件.验证插件适用于我的表单但不幸的是它不适用于reCaptcha.我试图让它在下面工作:
HTML:
<div class="g-recaptcha" name="recaptcha" id="recaptcha" data-sitekey="XXXXX"></div>
使用Javascript:
recaptcha: {
required: true
}
但它没有奏效.有谁知道如何解决这一问题.我只需要默认的这个字段是必需的错误信息.
jquery-validate ×10
jquery ×9
validation ×2
ajax ×1
firefox ×1
javascript ×1
php ×1
recaptcha ×1